微信小程序地图的标记和轨迹

 

1.标记图标

 

 

 

   <view class="top">
        <map wx:if="{{markersStatus}}" class="map" id="myMap" scale="{{scale}}" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{datatlist}}" bindregionchange="mapChange"  show-location='true'>
        </map>
        // 这个是上图灰色图标  点击可回到初始位置
        <view class="nav-panel">
            <image class="icon-location" bindtap="getCenterLocation" src="https://applets.jinchehui.com/static/images/icon_location_2.svg" bindtap="getCenterLocation"></image>
        </view>
    </view>
    <van-dialog id="van-dialog" />

小程序地理定位qqmap-wx-jssdk.js：qqmap-wx-jssdk.js
点击可进行下载里边的 ：下载微信小程序JavaScriptSDK

var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); //自行根据文件放置
var qqmapsdk;
qqmapsdk = new QQMapWX({
    key: '申请的key'
});
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
Page({

    /**
     * 页面的初始数据
     */
    data: {
        lat: '', //纬度
        lng: '', //经度
        latitude: '',
        longitude: '',
        keyword: '',
        scale: 16, //5-18
        markersStatus: false,
        datatlist: {}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.getLocation();
        this.bindAuthLocation(); //授权位置
    },

    //授权位置按钮
    bindAuthLocation() {
        //获取授权结果查看是否已授权位置
        wx.getSetting({
            success: (res) => {
                if (res.authSetting['scope.userLocation'] == undefined && !res.authSetting['scope.userLocation']) //未授权位置（首次进来页面）
                    this.getLocation(); //获取当前位置信息
                else if (res.authSetting['scope.userLocation'] === false) //未授权位置(点击官方授权弹框取消按钮后)
                    Dialog.confirm({
                        title: '提示',
                        message: '需要获取你的地理位置,你的位置信息将用于位置显示',
                    })
                    .then(() => {
                        this.bindConfirmLocation()
                        // on confirm
                    })
                    .catch(() => {
                        // on cancel
                    });
                else //已授权
                    this.getLocation(); //获取当前位置信息
            }
        })
    },
    //定位授权框确认按钮
    bindConfirmLocation(e) {
        //打开设置页面进行授权设置
        wx.openSetting({
            success: (res) => {
                if (res.authSetting['scope.userLocation']) {
                    //获取当前位置信息
                    this.getLocation(); //获取当前位置信息
                }
            }
        });
    },
    //获取位置
    getLocation() {
        this.mapCtx = wx.createMapContext('myMap')
        // 调用接口
        wx.getLocation({
            type: 'gcj02',
            success: (res) => {
                // console.log("res", res)
                if (res) {
                    this.data.lat = res.latitude;
                    this.data.lng = res.longitude;
                    this.setData({
                        latitude: this.data.lat,
                        longitude: this.data.lng,
                        markersStatus: true
                    })
                } else {
                    wx.showToast({
                        title: '定位失败',
                        icon: 'none',
                        duration: 1500
                    })
                }
                qqmapsdk.reverseGeocoder({
                    success: (res) => {
                        console.log('=============', res)
                    },
                });
                this.getFood(res.longitude, res.latitude)

                this.setData({
                    markersStatus: true
                })
            },
            fail(err) {
                wx.hideLoading({});
                console.log("asafasfs", err)
                // wx.showToast({
                //     title: '定位失败',
                //     icon: 'none',
                //     duration: 1500
                // })
                setTimeout(function () {
                    // wx.navigateBack({
                    //     delta: 1
                    // })
                }, 1500)
            }
        })
    },
    //点击回到初始位置
    getCenterLocation: function () {
        var that = this;
        that.mapCtx.moveToLocation()
    },
    //滑动获取周围的店铺
    mapChange(e) {
        if (e.type === 'end') {
            this.mapCtx.getCenterLocation({
                success: res => {
                    console.log(res);
                    this.getFood(res.longitude, res.latitude)
                }
            })
        }
    },
    //搜索附近的店铺
    getFood(longitude, latitude) {
        qqmapsdk.search({
            location: {
                latitude: latitude,
                longitude: longitude,
            },
            keyword: '',
            success: (res) => {
                console.log('地理位置:', res);
                var mark = []
                for (let i in res.data) {
                    mark.push({
                        iconPath: '/images/adr.png', //周边的图标    根据自己需要换
                        alpha: 1,
                        title: res.data[i].title,
                        id: Number(i),
                        longitude: res.data[i].location.lng,
                        latitude: res.data[i].location.lat,
                        width: parseInt(31.91) + 'px',//设置图标的大小
                        height: parseInt(31.91) + 'px',
                    })
                }
                mark.push({
                    iconPath: '/images/address.png', //中心的图标     根据自己需要换
                    id: Number(res.data.length),
                    alpha: 1,
                    longitude: longitude,
                    latitude: latitude,
                    width: parseInt(43.87) + 'px',
                    height: parseInt(43.87) + 'px',
                })
                this.setData({
                    datatlist: mark,
                })
            },
            fail: function (res) {
                console.log(res);
            },
            complete: function (res) {
                // console.log(res);
            }
        });
    },
})

2.画线画轨迹polyline

如果在地图上画出轨迹，需要先规划路径，规划线路会得到一个polyline的数组（有时需要解压），添加到map组件的polyline属性

https://developers.weixin.qq.com/miniprogram/dev/component/map.html#polyline

<map id="map"
  style="width:100vw;height:70vh;"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  scale="{{scale}}"
  markers="{{markersList}}"
  polyline="{{polyline}}"
  include-points='{{points}}'
  show-location
  bindtap='mapTap'
  bindmarkertap="markerTap"
  bindregionchange="regionChange"
>
  <cover-view class="cover-view" bindtap="controltap">
    <cover-image class="station" src="https://linli-oss.vecommunity.com/xchx/icon/position.jpg"></cover-image>
  </cover-view>
</map>

 

 例子：

 

 

 

 map_text.wxml

<!--pages/map_test/map_test.wxml-->
<view>
<!--wxml页面代码 已授权获取位置-->
<map id="map"
  style="width:100vw;height:70vh;"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  scale="{{scale}}"
  markers="{{markersList}}"
  polyline="{{polyline}}"
  include-points='{{points}}'
  show-location
  bindtap='mapTap'
  bindmarkertap="markerTap"
  bindregionchange="regionChange"
>
  <cover-view class="cover-view" bindtap="controltap">
    <cover-image class="station" style="width: 60rpx;height: 60rpx;" src="https://linli-oss.vecommunity.com/xchx/icon/position.jpg"></cover-image>
  </cover-view>
</map>

<form bindsubmit="formSubmit">
    <!--输入起点和目的地经纬度坐标，格式为string格式-->
    <!--起点输入框,同终点，不填默认当前位置-->
    <label>起点坐标：<input style="border:1px solid #000;" value="34.19,108.95" name="start"></input></label>
    <!--终点输入框,例：39.984060,116.307520-->
    <label>终点坐标：<input style="border:1px solid #000;" value="34.21,108.95" name="dest"></input></label> 
    <!--提交表单数据-->
    <button form-type="submit">路线规划</button>
</form>

</view>

 

 map_test.js  ( 文件中addPolyline()方法话出来的是直线，如上面的直线图，点击规划线路才是正确的路径 )

// pages/map_test/map_test.js
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;// 实例化API核心类
qqmapsdk = new QQMapWX({key: '自己的key'});
var that ;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    lat: '', //纬度
    lng: '', //经度
    latitude: '',
    longitude: '',
    keyword: '',
    scale: 16, //5-18
    markersStatus: false,
    datatlist: {},

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    that = this;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    that.mapCtx = wx.createMapContext('map');
    that.getLocation();
    that.addMarks();//添加标记
    that.addPolyline();//测试画直线 
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },
  getLocation(){
    // 调用接口
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
          console.log("res", res)
          if (res) {
              this.data.lat = res.latitude;
              this.data.lng = res.longitude;
              this.setData({
                  latitude: this.data.lat,
                  longitude: this.data.lng,
                  markersStatus: true
              });
          } else {
            wx.showToast({title: '定位失败',icon: 'none',duration: 1500})
          }

        },
        fail(err) {
          wx.hideLoading({});
          console.log("未获定位", err)
          wx.showToast({title: '定位失败',icon: 'none',duration: 1500})
          setTimeout(function () {
              // wx.navigateBack({
              //     delta: 1
              // })  
          }, 1500)
        }
    })

  },
  //添加标记
  addMarks(){
    let mark = [];
    let res = {data:[
      {title:'坐标1',location:{lng:108.95,lat:34.19}},
      {title:'坐标2',location:{lng:108.95,lat:34.20}},
      {title:'坐标3',location:{lng:108.95,lat:34.21}},
    ]};

    for(let i=0;i<res.data.length;i++){
      mark.push({
        iconPath: '/images/car.png', //周边的图标    根据自己需要换
        alpha: 1,
        title: res.data[i].title,
        id: Number(i),
        longitude: res.data[i].location.lng,
        latitude: res.data[i].location.lat,
        width: parseInt(31.91) + 'px',//设置图标的大小
        height: parseInt(31.91) + 'px',
    });

    that.setData({markersList:mark});

    }

  },
  //描绘路径（画直线测试）
  addPolyline(){
    let points = [{longitude:108.95,latitude:34.19},{longitude:108.95,latitude:34.20},{longitude:108.95,latitude:34.21}];
    let polyline = [{
      points:points,
      width: parseInt(10.91) + 'px',//设置图标的大小
      color: "#FA6400",
      arrowLine: true,
      borderWidth: 2 //线的边框宽度，还有很多参数，请看文档 
    }];

    that.setData({polyline:polyline});
    that.setData({points:points});

    //地图绘制
    var mapCtx = wx.createMapContext("map");
    mapCtx.includePoints({
      points: points
    })

  },
  //在Page({})中使用下列代码
//触发表单提交事件，调用接口
formSubmit(e) {
  var _this = this;
  //调用距离计算接口
  qqmapsdk.direction({
    mode: 'transit',//'transit'(公交路线规划)
    //from参数不填默认当前地址
    from: e.detail.value.start,
    to: e.detail.value.dest, 
    success: function (res) {
      console.log(res);
      var ret = res.result.routes[0];
      var count = ret.steps.length;
      var pl = [];
      var coors = [];
      //获取各个步骤的polyline
      for(var i = 0; i < count; i++) {
        if (ret.steps[i].mode == 'WALKING' && ret.steps[i].polyline) {
          coors.push(ret.steps[i].polyline);
        }
        if (ret.steps[i].mode == 'TRANSIT' && ret.steps[i].lines[0].polyline) {
          coors.push(ret.steps[i].lines[0].polyline);
        }
      }       
      //坐标解压（返回的点串坐标，通过前向差分进行压缩）
      var kr = 1000000;
      for (var i = 0 ; i < coors.length; i++){
        for (var j = 2; j < coors[i].length; j++) {
          coors[i][j] = Number(coors[i][j - 2]) + Number(coors[i][j]) / kr;
        }
      }
      //定义新数组，将coors中的数组合并为一个数组

      var coorsArr = [];
      for (var i = 0 ; i < coors.length; i ++){
        coorsArr = coorsArr.concat(coors[i]);
      }
      //将解压后的坐标放入点串数组pl中
      for (var i = 0; i < coorsArr.length; i += 2) {
        pl.push({ latitude: coorsArr[i], longitude: coorsArr[i + 1] })
      }
      //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
      _this.setData({
        latitude:pl[0].latitude,
        longitude:pl[0].longitude,
        polyline: [{
          points: pl,
          color: '#FF0000DD',
          width: 4
        }]
      })
    },
    fail: function (error) {
      console.error(error);
    },
    complete: function (res) {
      console.log(res);
    }
  });
}


})

 

 

转 ： https://www.jianshu.com/p/24e95ac0e6e3

https://blog.csdn.net/weixin_46653486/article/details/124444537

https://blog.csdn.net/flyestcoder/article/details/109532523

https://blog.csdn.net/heavenz19/article/details/128456228