index.wxml文件如下,markers标点
<map id="map" longitude="{{jd}}" latitude="{{wd}}"
markers="{{markers}}" style="width: 100%; height: 1000rpx;" show-location></map>
index.js文件如下,仍使用上一节的腾讯sdk,在获取当前地理位置后,利用腾讯sdk的search方法查找周边厕所,返回数组数据。选取5个标点进行赋值。
-
var QQMapWX = require('../libs/qqmap-wx-jssdk.js');
-
var qqmapsdk;
-
var latitude1, longitude1;
-
var getdata = [];
-
Page({
-
data: {
-
},
-
-
onLoad: function (options) {
-
qqmapsdk = new QQMapWX({
-
key: '22VBZ-REEK5-WVSI7-QKCOP-QPM6E-W7BPO'
-
});
-
},
-
-
onReady: function () {
-
var that = this
-
wx.getLocation({
-
type: 'wgs84',
-
success: function (res) {
-
console.log(res)
-
latitude1 = res.latitude
-
longitude1 = res.longitude
-
qqmapsdk.search({
-
location: {
-
latitude: latitude1,
-
longitude: longitude1
-
},
-
keyword: '厕所',
-
success: function (res) {
-
console.log(res.data);
-
console.log(res.data[0].location.lat);
-
getdata = res.data
-
that.setData({
-
wd: latitude1,
-
jd: longitude1,
-
markers: [
-
{
-
iconPath: "../libs/w.jpg",
-
id: 0,
-
latitude: getdata[0].location.lat,
-
longitude: getdata[0].location.lng
-
-
},
-
{
-
iconPath: "../libs/w.jpg",
-
id: 1,
-
latitude: getdata[1].location.lat,
-
longitude: getdata[1].location.lng
-
-
},
-
{
-
iconPath: "../libs/w.jpg",
-
id: 2,
-
latitude: getdata[2].location.lat,
-
longitude: getdata[2].location.lng
-
-
},
-
{
-
iconPath: "../libs/w.jpg",
-
id: 3,
-
latitude: getdata[3].location.lat,
-
longitude: getdata[3].location.lng
-
},
-
{
-
iconPath: "../libs/w.jpg",
-
id: 4,
-
latitude: getdata[4].location.lat,
-
longitude: getdata[4].location.lng
-
},
-
]
-
-
})
-
-
}
-
});
-
}
-
})
-
},
-
})