微信小程序地图实现展示路线路

向右看齐 2023-02-16 06:59 35阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70][]

思路：

1、首先获取一系列的坐标点，然后将这些坐标从头到尾链接起来。（参考微信小程序地图组件**polyline****属性**）

2、在获取的坐标点上标注某一个位置，实现打点。（参考微信小程序地图组件marker属性 ）

3、使用map组件

微信小程序地图组件api地址：[https://developers.weixin.qq.com/miniprogram/dev/component/map.html][https_developers.weixin.qq.com_miniprogram_dev_component_map.html]

下面直接展示代码：

wxml:

<view class="page-section page-section-gap">
      
        <map class="navi_map"  include-points='{
       {points}}' longitude="{
       {longitude}}" latitude="{
       {latitude}}" polyline="{
       {polyline}}" markers="{
       {markers}}" bindcallouttap="bindcallouttap" bindmarkertap="markertap" style="width: 100%; height: {
       {view.Height}}px;" wx:if="{
       {hasMarkers}}" scale="10" ></map>
      </view>
      <view class="maptext" wx:if="{
       {mapList!=''}}">
        <view  class="news">
            <view wx:if="{
       {mapList.polylineJson!=null}}">预计<text style="color:#FF6565">{
       {now}}</text>送达</view>
            <view class="tishi">由药店提供配送服务</view>
        </view>
        <view  class="phone_box">
           <view style="" class="right_box" data-phone="{
       {mapPhone}}" bindtap="makeCallPhone" wx:if="{
       {mapPhone!=null}}">
            <image src="{
       {imgUrl}}mapshop_phone.png"></image><view style="line-height:96rpx">联系商家</view>
          </view>
          <view  class="left_box" data-deliverhone="{
       {deliverPhone}}" bindtap="makesCallPhone" wx:if="{
       {deliverPhone!=null}}">
            <image src="{
       {imgUrl}}map_phone.png"></image><view style="line-height:96rpx">联系配送员</view>
          </view>
        </view>
      </view>

js:

data: {
        longitude: '',
        latitude:'',
        points: [],
        polyline: [],
        markers: [],
        mapList:'',
        polylineList:[],
       
      },
     mapLine(options){
          wx.showLoading({
            title: '加载中',
          })
          let subOrderNo = options.maporder
          console.log(subOrderNo)
          let that=this
          let token = that.data.storageData.token
          let url = '接口地址';
          let params = {
            subOrderNo:subOrderNo
          };
       
          http.getRequest(url, params, token).then(res => {
             
              
                // 地图打点标记商家和配送员位置
                let markers= [
                  {
                  iconPath: imgUrl+'shoplong.png',
                  id: 0,
                  latitude: that.data.mapList.pharmacyInfo.latitude,
                  longitude: that.data.mapList.pharmacyInfo.longitude,
                  callout: { 
                    content: that.data.mapList.pharmacyInfo.pharmacyName+"已接单",
                    name:"商家已接单",
                    color: "#ff0000",
                    fontSize: "16", 
                    borderRadius: "6",
                    bgColor: "#ffffff",
                    padding: "10",
                    display:"ALWAYS"
                   },
                  width: 50,
                  height: 50
                },
                {
                  iconPath:imgUrl+ 'maplog.png',
                  id: 1,
                  latitude: that.data.mapList.locationList[0].latitude,
                  longitude: that.data.mapList.locationList[0].longitude,
                  callout: { 
                    content: "配送员正在配送",
                    name:"正在配送",
                    color: "#ff0000",
                    fontSize: "16", 
                    borderRadius: "6",
                    bgColor: "#ffffff",
                    padding: "10",
                    display:"ALWAYS"
                   },
                  width: 50,
                  height: 50
                },
              ];
              console.log(markers)
              let _this=this
              _this.setData({
                markers:markers,
                hasMarkers:true,
                latitude:that.data.mapList.pharmacyInfo.latitude,
                longitude:that.data.mapList.pharmacyInfo.longitude
              })
              if(orderDeliver.polylineJson!=null){
                let mapJson = JSON.parse(orderDeliver.polylineJson);
                console.log(mapJson)
                // 计算送达时间
                let mapDate=that.data.mapList.updateTime
                let newsDate=new Date(mapDate)
                // let h = newsDate.getHours()
                let m = newsDate.getMinutes()
                let mapMinte=mapJson.route.paths[0].duration/60
                newsDate.setMinutes(m+mapMinte)
                let dd=newsDate.getMinutes()
                let hh=newsDate.getHours()
                if(dd<10){
                  dd='0'+dd
                }
                if(hh<10){
                  hh='0'+hh
                }
                let now=hh +':'+dd;
                if(newsDate.getMinutes()>=60){
                    h=h+1;
                }else{
                  this.setData({
                    now:now
                  })
                  console.log(now)
                }
                // 循环数组取快递员的经纬度
                let list = mapJson.route.paths[0].steps;
                // console.log(list);
                let polylineList = [];   
                for(let i =0;i<list.length;i++){
                  let polyline = list[i].polyline;
                  if(polyline.indexOf(";") != -1){
                    let pList = polyline.split(";");
                    // console.log(pList)
                    pList.map((items,index) =>{
                      let a = items.split(",");
                      polylineList.push({
                        latitude: a[1],
                        longitude: a[0]
                      });
                      // console.log(polylineList)
                    })
                    // polylineList.concat(pList);
                  }
                }
                  let polyline = [{
                    points: polylineList,
                    color: "#518FF8",
                    width: 4,
                    dottedLine: false
                  }];
                  this.setData({
                    polyline:polyline,
                    points:polylineList,
                  }) 
                }    
              }else if(res.responseCode == 0 && res.responseBody != null && res.responseBody.length != 0 && res.responseBody.deliverType ==2){
                let list_di=res.responseBody.deliverType
                let maplistJson=res.responseBody.polylineJson
                let listMap=JSON.parse(maplistJson)
                console.log(listMap)
                let logList=listMap.data.reverse()
                logList.forEach(element => {
                    element.ftime = element.ftime.substring(0,16)
                });
                console.log(logList)
                this.setData({
                  mapList:[],
                  hasMarkers:false,
                  logList:logList,
                  list_di:list_di
                })
                // sysMsg.sysMsg("商家还未接单，请稍后查看", 2000, 'none');
              }else{
                sysMsg.sysMsg("商家还未接单，请稍后查看", 2000, 'none');
              }
          }).catch(err => {
            console.log(err);
            sysMsg.sysMsg("请求超时，请稍后再试", 1500, 'none');
          })
      },
     onLoad: function (options) {
        this.mapLine(options)
        this.mapHeight()
        this.mapLog()
        // this.markers()
        // console.log(options.maporder)
        this.getstorageDataToPage()
             // qq地图api
         qqmapsdk = new QQMapWX({
          key: '申请的微信小程序地图key'
        });
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200609134328426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy,size_16,color_FFFFFF,t_70
[https_developers.weixin.qq.com_miniprogram_dev_component_map.html]: https://developers.weixin.qq.com/miniprogram/dev/component/map.html