小程序 地图起点终点 中间动态

最新推荐文章于 2022-12-17 13:28:01 发布
原创 最新推荐文章于 2022-12-17 13:28:01 发布 · 548 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在微信小程序中使用腾讯地图API实现路径绘制的方法，并通过不断更新工程师坐标来实时显示移动路线。文章详细解释了如何获取并解析路径坐标，以及如何将这些坐标转换为地图上的可视路径。 
// pages/WLXiangqing/WLXiangqing.js
var coors;
import { request } from './../../request/index.js';
Page({
  data: {
    polyline: [],
    markers: [],
  },
  onReady: function () {
    this.mapContext = wx.createMapContext("map", this);
  },
  onLoad: function (options) {
    this.getLatLng();
    // 获取当前地图，设置经纬度，传递过来的坐标，用户下单的坐标地址。
    console.log(options);
    wx.getLocation({
      success: (res) => {
        // this.setData({
        //   latitude: options.latitude,
        //   longitude: options.longitude
        // });
        this.getCenterLocation(res);
        wx.request({
          url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=' + this.data.markers[0].latitude + ',' + this.data.markers[0].longitude + '&to=' + this.data.markers[1].latitude + ',' + this.data.markers[1].longitude + '&output=json&callback=cb&key=PD5BZ-K2VRO-CPEWZ-SOBAC-4KCDT-KAFLF',
          success: (res) => {
           
            coors = res.data.result.routes[0].polyline
            console.log(coors)
            for (var i = 2; i < coors.length; i++) {
              coors[i] = coors[i - 2] + coors[i] / 1000000
            }
            // console.log(coors)
            //划线
            var b = [];
            for (var i = 0; i < coors.length; i = i + 2) {
              b[i / 2] = {
                latitude: coors[i],
                longitude: coors[i + 1]
              };
              console.log(b[i / 2])
            }
            this.setData({
              polyline: [{
                points: b,
                color: "#00ae20",
                width: 4,
                dottedLine: false
              }],
            })
          }
        })
      },
    });
  },
  //  两个坐标 一个下单地址，一个工程师接单地址，然后不停的更新工程师的坐标位置。
  getCenterLocation: function (res) {
    // request({
    //   url: '/GetDriverAddress',
    //   method: 'POST',
    //   data: {
    //     orderId:wx.getStorageSync('ddbh'),
    //     customerId: wx.getStorageSync('userCode'),
    //     outboundorderId: wx.getStorageSync('outboundorderId')

    //     // outboundorderId: 'WZ00000001',
    //     // orderId: 'XSAA0000590677',
    //     // customerId: '7'

    //   }
    // }).then(res1=>{
    //   console.log(res1)
    //   let markersMap = res.data.Source[0];
    //   this.setData({
    //     markers: [
    //       {
    //         iconPath: "/images/map.png",
    //         id: 0,
    //         latitude: markersMap.stalat,
    //         longitude: markersMap.stalng,
    //         width: 30,
    //         height: 30,
    //         alpha: 0.8,
    //         callout: {
    //           content: " 起始位置 ",
    //           color: "#ffffff",
    //           fontSize: 10,
    //           borderRadius: 10,
    //           bgColor: "#6e707c",
    //           padding: 5,
    //           display: "ALWAYS"
    //         }
    //       },
    //       {
    //         iconPath: "/images/map.png",
    //         id: 1,
    //         latitude: markersMap.endlat,
    //         longitude: markersMap.endlng,
    //         width: 20,
    //         height: 30,
    //         alpha: 0.8,
    //         callout: {
    //           content: " 终点 ",
    //           color: "#ffffff",
    //           fontSize: 10,
    //           borderRadius: 10,
    //           bgColor: "#6e707c",
    //           padding: 5,
    //           display: "ALWAYS"
    //         }
    //       }
    //     ],
    //   })
    // })


    // this.setData({
    //   markers: [{
    //     iconPath: "/images/cart.png",
    //     id: 0,
    //     latitude: res.latitude,
    //     longitude: res.longitude,
    //     width: 30,
    //     height: 30,
    //     alpha: 0.8,
    //     callout: {
    //       content: " 我的位置 ",
    //       color: "#ffffff",
    //       fontSize: 10,
    //       borderRadius: 10,
    //       bgColor: "#6e707c",
    //       padding: 5,
    //       display: "ALWAYS"
    //     }
    //   },
    //   {
    //     iconPath: "/images/map.png",
    //     id: 1,
    //     latitude: res.latitude + 0.1,
    //     longitude: res.longitude + 0.1,
    //     width: 20,
    //     height: 30,
    //     alpha: 0.8,
    //     callout: {
    //       content: " 终点 ",
    //       color: "#ffffff",
    //       fontSize: 10,
    //       borderRadius: 10,
    //       bgColor: "#6e707c",
    //       padding: 5,
    //       display: "ALWAYS"
    //     }
    //   }
    //   ],
    // });
  },
  // getCenterLocation(){
  //   request({
  //     url: '/GetDriverAddress',
  //     method: 'POST',
  //     data: {
  //       // orderId:wx.getStorageSync('ddbh'),
  //       // customerId: wx.getStorageSync('userCode'),
  //       // outboundorderId: wx.getStorageSync('outboundorderId')

  //       outboundorderId: 'WZ00000001',
  //       orderId: 'XSAA0000590677',
  //       customerId: '7'

  //     }
  //   }).then(res => {
  //     if (res.data.Code === 0) {
  //       console.log(res.data.Source[0])
  //       let markersMap = res.data.Source[0];
  //       this.setData({
  //         markers: [
  //           {
  //             iconPath: "/images/map.png",
  //             id: 0,
  //             latitude: markersMap.stalat,
  //             longitude: markersMap.stalng,
  //             width: 30,
  //             height: 30,
  //             alpha: 0.8,
  //             callout: {
  //               content: " 起始位置 ",
  //               color: "#ffffff",
  //               fontSize: 10,
  //               borderRadius: 10,
  //               bgColor: "#6e707c",
  //               padding: 5,
  //               display: "ALWAYS"
  //             }
  //           },
  //           {
  //             iconPath: "/images/map.png",
  //             id: 1,
  //             latitude: markersMap.endlat,
  //             longitude: markersMap.endlng,
  //             width: 20,
  //             height: 30,
  //             alpha: 0.8,
  //             callout: {
  //               content: " 终点 ",
  //               color: "#ffffff",
  //               fontSize: 10,
  //               borderRadius: 10,
  //               bgColor: "#6e707c",
  //               padding: 5,
  //               display: "ALWAYS"
  //             }
  //           }
  //         ],
  //         })
  //       }

  //     })
  // }


  getLatLng:function(){
    request({
      url: '/GetDriverAddress',
      method: 'POST',
      data: {
        // orderId:wx.getStorageSync('ddbh'),
        // customerId: wx.getStorageSync('userCode'),
        // outboundorderId: wx.getStorageSync('outboundorderId')

        outboundorderId: 'WZ00000001',
        orderId: 'XSAA0000590677',
        customerId: '7'

      }
    }).then(res1 => {
      console.log(res1)
      let markersMap = res1.data.Source[0];
      console.log("1111111111111111")
      console.log(markersMap)
      this.setData({
        markers: [
          {
            iconPath: "/images/map.png",
            id: 0,
            latitude: markersMap.stalat,
            longitude: markersMap.stalng,
            width: 30,
            height: 30,
            alpha: 0.8,
            callout: {
              content: " 起始位置 ",
              color: "#ffffff",
              fontSize: 10,
              borderRadius: 10,
              bgColor: "#6e707c",
              padding: 5,
              display: "ALWAYS"
            }
          },
          {
            iconPath: "/images/map.png",
            id: 1,
            latitude: markersMap.endlat,
            longitude: markersMap.endlng,
            width: 20,
            height: 30,
            alpha: 0.8,
            callout: {
              content: " 终点 ",
              color: "#ffffff",
              fontSize: 10,
              borderRadius: 10,
              bgColor: "#6e707c",
              padding: 5,
              display: "ALWAYS"
            }
          },
          {
            iconPath: "/images/cart.png",
            id: 1,
            latitude: markersMap.lat,
            longitude: markersMap.lng,
            width: 20,
            height: 30,
            alpha: 0.8,
            callout: {
              content: " 货车 ",
              color: "#ffffff",
              fontSize: 10,
              borderRadius: 10,
              bgColor: "#6e707c",
              padding: 5,
              display: "ALWAYS"
            }
          }
        ],
      })
    })
  }
});

<!--pages/WLXiangqing/WLXiangqing.wxml-->
<view class="mapHeight">
  <map 
    id="map" 
    class="map"
    scale='16'
    polyline="{{polyline}}"
    markers="{{markers}}" 
    include-points="{{markers}}"
   ></map>
</view>
一天28小时
关注
小程序地图功能开发：定位+导航完整实现
小程序开发
07-05 1699
随着O2O（线上到线下）服务的普及，地图功能已成为小程序的“标配”：外卖需要定位用户地址、打车需要导航司机路径、社交需要共享位置……本文聚焦微信小程序，覆盖从“获取当前位置”到“调用导航”的完整流程，解决开发者在实际开发中最常遇到的“定位失败”“坐标偏差”“导航不显示”等问题。通过“外卖骑手接单”的故事引出需求；解释定位、逆地理编码、导航的核心概念；结合微信小程序API，提供从环境搭建到代码实现的完整实战；总结常见问题与未来趋势。WGS84坐标系。
微信小程序的地图功能应用：小程序领域的地理探索
小程序开发
07-05 1080
想象一下：你打开“XX外卖”小程序，屏幕上一个小蓝点（你的位置）旁边，有个小黄点正在移动——那是骑手带着你的奶茶赶来！这背后就是微信小程序地图功能的功劳。本文将聚焦微信小程序中地图功能的核心技术点（定位、地图展示、POI搜索、路径规划），覆盖从概念理解到代码实战的全流程，帮助开发者快速上手，也让普通用户了解“地图魔法”的原理。本文将按“从概念到实战”的逻辑展开：先讲地图功能的“基础零件”（定位、地图组件等），再用生活例子解释它们如何协作；接着用代码带您实现一个“找附近便利店”的小程序；
微信小程序-在地图上显示当前位置，获得当前坐标
heikai107的博客
02-25 4035
功能：打开小程序就展开地图 并且标注当前位置，点击 获取位置，就可以在后台获得坐标信息 app.json:要引入permission函数 "sitemapLocation": "sitemap.json", "permission": { "scope.userLocation": { "desc": "获取定位位置" } } js文件： // pages/map/index10.js Page({ /** * 页面的初始数据 */ data: .
微信小程序获取地址核心代码
wgod
04-20 628
wx.getLocation({ type: ‘wgs84’, success(res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy wx.chooseLocation({ ...
微信小程序地图滑动实时显示当前中心点所处的地理位置名称
06-20 1万+
实现如下图功能：即当地图滑动时，在下方实时显示当前的位置。查阅了微信小程序地图组件的相关api,发现只能有当前位置的经、纬度，但没有具体的地址名称，所以在这个地方需要用到腾讯地图开放平台的，微信小程序地图组件功能。一、相关文档地址 http://lbs.qq.com/qqmap_wx_jssdk/index.html  可以据此查看相关文档，来解决。解决方式如下。二、先注册一个账号，申请一个key...
小程序地图和小程序在地图上实现多点标记
05-19
最近做小程序想要实现在地图上进行多点标记功能，特此附上代码，若有问题，还请指教
小程序绘制简易地图路线
11-15
利用高德提供的API，实现输入经纬度，在地图上绘制路线
微信小程序地图绘制路线如何计算出中间
最新发布
07-09
查看qqmap-wx-jssdk的文档，其返回的polyline数组中的每个点格式为：{lat: 39.123, lng: 116.123}，而微信小程序地图组件的points要求是数组，每个元素格式为：{latitude: 39.123, longitude: 116.123}。...
基于MVVC架构的微信小程序开发中室内地图导航的解决方案探索.zip
10-16
视图（View）部分主要包括地图组件和用户交互元素，如起点终点选择按钮、导航指示箭头等。在微信小程序中，我们可以使用wxml和wxss来定义布局和样式，通过js文件实现逻辑控制。通过MVVM的数据绑定，View可以直接显示...
微信小程序-点击marker标记点进行路线规划（附源码）
自知者明，知人者智
11-11 4560
 1、微信小程序支持路线规划，官方有现成组件，但是仅支持输入起点终点的经纬度信息进行路线规划，如下图  2、官方接口地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection  3、项目需求:点击地图上的标记点，自动进行路线规划，更换标记点就更换路线，效果如图  4、要实现项目需求，只需要稍微改动官方提供的接口代码即可  5、详细步骤  (1)下载腾讯地图SDK，官方下载链接：https://lbs.qq.com/miniProg
微信小程序动画的2种方式
weixin_34101229的博客
01-21 952
&lt;view class="voteBox" animation="{{animation}}"&gt;&lt;/view&gt;复制代码 this.animation = wx.createAnimation({ duration: 500, timingFunction: "ease", transformOrigin: "50% 50...
百度地图之修改起点和终点的icon
andu3486的博客
12-05 1893
修改起点和终点的icon图标是有区别的，区别在于你有没有途经点，如果你的项目中只有起点和终点的话，那么你可以用第一种方法，如果有途经点的话，那么就要用第二种方法，当然第二种方法也可用于没有途径点的情况下，这个就是随君喜欢了； 1.在没有途径点的情况下修改起点和终点的icon 代码展示： var map = new BMap.Map("allmap"); map.centerA...
小程序中规划地图路径在地图上显示、并且标记当前移动的位置
Bright2017的博客
03-30 6270
wxml <map id="map" longitude="113.324520" latitude="23.099994" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bind...
微信小程序 MapContext.includePoints实现自动缩放地图大小
qq_43679736的博客
11-17 2464
官方文档又是一笔带过，没办法，查资料查的一肚子火，好在最后还是实现了，直接贴代码记录一下我踩的坑，也让后面的兄弟别踩了。最近做了个功能，根据用户和商家之间的距离画出导航线，然后根据距离自动缩放地图的scale。
微信小程序开发——map组件
番薯大佬的专栏
04-03 1万+
WeChat小程序交流（QQ群：769977169）效果图代码示例1、xxx.wxml&lt;map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" controls="{{controls}}" circles="{{circles}}" polyline=&quot
使用微信小程序的map组件
richest_qi的博客
06-30 1091
简单示例 拾取目标地点的经纬度 到腾讯位置服务网站上获取 北京石景山区万达广场云海肴 的经纬度。 目标地址的纬度(latitude)为39.905791，经度(longitude)为116.225669。 使用map组件 <!--pages/test/test.wxml--> <map latitude="39.905791" longitude="116.225669" ></map> 调用微信内置地图和定位 首先，获得 用户授权，只有用户同意授权，后面才可
微信小程序—map地图实现标记多个位置
热门推荐
行秋的博客
12-16 1万+
前言： 在这里给大家介绍一个地标搜索网站（可精准获取经纬度）： http://so.earthol.com/ 小程序官方地图 map 文档参考 小程序官方地图 map 相关 API （地图组件控制）参考 问题解决： 这里利用我母校：西北农林科技大学 做实验地。对垃圾桶进行标记。这里为了减少代码的冗余，只选了几个位置。 效果图+项目结构如下： index.js代码： ...
uniapp 小程序和app map地图上显示多个酷炫动态的标点，头像后端传过来，真机测试有效
weixin_43929450的博客
12-17 1万+
最近正在做小程序地图，收到ui 给的图，一开始以为很简单的，但在看了ui 给的图以后，发现没有这么简单。下面是ui给的图：于是花了很长的时间，走了很多坑才最终实现，来看效果链接：图片如下：接下来我将花点时间来说说如何实现和所遇到的坑！！如果需要完整的demo 代码，请联系 1015095073 @qq . com。
小程序基本命令
aiven1637的博客
10-30 3468
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值