微信小程序地图的标记和轨迹
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
