如果对您有帮助，请关注我，欢迎加入微信小程序开发交流QQ群（173683866），有问题也可以加群问我获取问群里的大神！！！
功能实现：
1. 根据后台传递过来的数据，包括地址名字，经纬度坐标等都展示在map组件上；
2. 点击相应地址实现用户当前位置导航至点击的目的地位置的功能。
3. 微信小程序内打开腾讯地图APP或者高德地图APP。
先上效果图
代码：
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location width: 100%; height: 100%;"></map>// map.js
var markers = [];//地图标记点
var callout = [];//地图标记点的气泡
var app = getApp()
Page({
data: {
marker_latitude: '',
marker_longitude: '',
},
onLoad() {
var that = this;
wx.request({
url: '' + app.globalData.subDomain + '/storelist.php?classid=76',
headers: {
'Content-Type': 'application/json'
},
success: function (res) {
that.setData({
listData: res.data.result
})
var listData = res.data.result;
for (var i = 0; i < listData.length; i++) {
markers = markers.concat({
iconPath: "/image/dizhi.png",
id: listData[i].id,
callout: {
content: listData[i].title,
fontSize: '32',
padding: true,
color:'#444',
display: 'ALWAYS',
textAlign: 'center',
borderRadius: 15
},
latitude: listData[i].weidu,
longitude: listData[i].jingdu,
width: 20,
height: 20
});
}
console.log(markers)
that.setData({
markers: markers,
latitude: listData[0].weidu,
longitude: listData[0].jingdu
})
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
that.setData({
// latitude: latitude,
// longitude: longitude
})
}
})
}
})
},
onShow() {
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
var that = this;
console.log(e.markerId)
for (var i = 0; i < this.data.listData.length; i++) {
if (e.markerId == this.data.listData[i].id) {
this.setData({
marker_latitude: this.data.listData[i].weidu,
marker_longitude: this.data.listData[i].jingdu,
title: this.data.listData[i].title
})
}
}
wx.openLocation({
latitude: Number(that.data.marker_latitude),
longitude: Number(that.data.marker_longitude),
name: that.data.title,
scale: 28
})
},
controltap(e) {
console.log(e.controlId)
}
})map{
height: 100%;
}
page{
height: 100%;
}
