本地图程序利用map组件，以及使用它的markers,polyline属性分别设置地图两个位置的标志以及他们之间的连线，利用腾讯地图的API对两个地点进行查询，动态设置地图的经纬度，以及动态初始化markers,polyline属性。
程序运行截图如下：
程序代码如下：
app.json
{"pages": ["pages/index/index","pages/logs/logs","pages/Map/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "个人主页","iconPath": "utils/images/b3.png","selectedIconPath": "utils/images/b4.png"},{"pagePath": "pages/Map/index","text": "地图","iconPath": "utils/images/a1.png","selectedIconPath": "utils/images/a2.png"}]}}
2.map/index.js
// pages/Map/index.jsvar QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');var qqmapsdk = new QQMapWX({key: 'GEYBZ-IM4WJ-TK5FL-K7BKW-TDDV2-P5FGL'});Page({/*** 页面的初始数据*/data: {start_lat: 0,start_lon: 0,end_lat:0,end_lon:0,markers: [{iconPath: '../../utils/images/qz.jpg',id: 0,latitude: 0,longitude: 0,width: 50,height: 50},{iconPath: '../../utils/images/qz.jpg',id: 1,latitude: 0,longitude: 0,width: 50,height: 50}],address: '',polyline: [{points: [{longitude: 0,latitude: 0}, {latitude: 0,longitude: 0}],color: "#ff6600",width: 2,dottedLine: false,arrowLine: true,borderColor: "#000",borderWidth: 5}]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;let start_lat=0;let start_lon=0;wx.getLocation({success: function (res) {qqmapsdk.search({keyword: '江西省南昌市新建区丰和南大道696号',complete: function (res) {console.log(res.data[0].location.lat);console.log(res.data[0].location.lng);start_lat = res.data[0].location.lat;start_lon = res.data[0].location.lng;that.setData({start_lat: res.data[0].location.lat,start_lon: res.data[0].location.lng,"markers[0].latitude": res.data[0].location.lat,"markers[0].longitude": res.data[0].location.lng,"polyline[0].points[0].latitude": res.data[0].location.lat,"polyline[0].points[0].longitude": res.data[0].location.lng,})}});qqmapsdk.search({keyword: '江西省南昌市新建区红谷滩新区学府大道999号',complete: function (res) {that.setData({end_lat: res.data[0].location.lat,end_lon: res.data[0].location.lng,"markers[1].latitude": res.data[0].location.lat,"markers[1].longitude": res.data[0].location.lng,"polyline[0].points[1].latitude": res.data[0].location.lat,"polyline[0].points[1].longitude": res.data[0].location.lng,// polyline: [{// points: [{// longitude: res.data[0].location.lng,// latitude: res.data[0].location.lat// }, {// latitude: that.data.start_lat,// longitude: that.data.start_lon// }],// color: "#ff6600",// width: 2,// dottedLine: false,// arrowLine: true,// borderColor: "#000",// borderWidth: 5// }]});}})},})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
3.map/index.wxml
<map class='map' latitude='{{start_lat}}' longitude='{{start_lon}}' polyline="{{polyline}}" markers='{{markers}}'></map>
4.map/index.wxss
page{width: 100%;height: 100%;}.map{height: 100%;width: 100%;}
