126 lines
3.3 KiB
JavaScript
126 lines
3.3 KiB
JavaScript
|
// 引用百度地图微信小程序JSAPI模块
|
||
|
|
var bmap = require('../../lib/bmap-wx.js');
|
||
|
|
var wxMarkerData = [];
|
||
|
|
Page({
|
||
|
|
data: {
|
||
|
|
markers: [],
|
||
|
|
longitude: 111.75292024572663,
|
||
|
|
latitude: 40.85426882952502,
|
||
|
|
placeData: {},
|
||
|
|
searchType: '场馆',
|
||
|
|
showDetail: false
|
||
|
|
},
|
||
|
|
goHere: function () {
|
||
|
|
var self = this
|
||
|
|
wx.getLocation({
|
||
|
|
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
|
||
|
|
success(res) {
|
||
|
|
const latitude = parseFloat(self.data.placeData.latitude)
|
||
|
|
const longitude = parseFloat(self.data.placeData.longitude)
|
||
|
|
wx.openLocation({
|
||
|
|
latitude,
|
||
|
|
longitude,
|
||
|
|
scale: 15
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
doSearch: function (e) {
|
||
|
|
this.setData({
|
||
|
|
searchType: e.currentTarget.dataset.poi
|
||
|
|
})
|
||
|
|
this.initMap()
|
||
|
|
},
|
||
|
|
makertap: function (e) {
|
||
|
|
var that = this;
|
||
|
|
var id = e.markerId;
|
||
|
|
that.showSearchInfo(wxMarkerData, id);
|
||
|
|
that.changeMarkerColor(wxMarkerData, id);
|
||
|
|
that.setData({
|
||
|
|
showDetail: true
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initMap: function () {
|
||
|
|
var that = this;
|
||
|
|
// 新建百度地图对象
|
||
|
|
var BMap = new bmap.BMapWX({
|
||
|
|
ak: 'Zk732rbyjd327q7Zj9EOtRjUn2ED1GWK'
|
||
|
|
});
|
||
|
|
var fail = function (data) {
|
||
|
|
// console.log(data)
|
||
|
|
};
|
||
|
|
var success = function (data) {
|
||
|
|
wxMarkerData = data.wxMarkerData;
|
||
|
|
wxMarkerData[0].longitude = that.data.longitude
|
||
|
|
wxMarkerData[0].latitude = that.data.latitude
|
||
|
|
that.setData({
|
||
|
|
markers: wxMarkerData
|
||
|
|
});
|
||
|
|
that.setData({
|
||
|
|
latitude: wxMarkerData[0].latitude
|
||
|
|
});
|
||
|
|
that.setData({
|
||
|
|
longitude: wxMarkerData[0].longitude
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// 发起POI检索请求
|
||
|
|
BMap.search({
|
||
|
|
"query": that.data.searchType,
|
||
|
|
fail: fail,
|
||
|
|
success: success,
|
||
|
|
// 此处需要在相应路径放置图片文件
|
||
|
|
iconPath: '../../images/marker_red.png',
|
||
|
|
// 此处需要在相应路径放置图片文件
|
||
|
|
iconTapPath: '../../images/marker_red.png'
|
||
|
|
});
|
||
|
|
},
|
||
|
|
showSearchInfo: function (data, i) {
|
||
|
|
var that = this;
|
||
|
|
if(data[i].telephone == undefined){
|
||
|
|
data[i].telephone = '暂无'
|
||
|
|
}
|
||
|
|
that.setData({
|
||
|
|
placeData: {
|
||
|
|
title: '名称：' + data[i].title + '\n',
|
||
|
|
address: '地址：' + data[i].address + '\n',
|
||
|
|
telephone: '电话：' + data[i].telephone + '\n',
|
||
|
|
longitude : data[i].longitude,
|
||
|
|
latitude : data[i].latitude
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onLoad: function () {
|
||
|
|
|
||
|
|
this.getPosition()
|
||
|
|
},
|
||
|
|
changeMarkerColor: function (data, i) {
|
||
|
|
var that = this;
|
||
|
|
var markers = [];
|
||
|
|
for (var j = 0; j < data.length; j++) {
|
||
|
|
if (j == i) {
|
||
|
|
// 此处需要在相应路径放置图片文件
|
||
|
|
data[j].iconPath = "../../images/marker_yellow.png";
|
||
|
|
} else {
|
||
|
|
// 此处需要在相应路径放置图片文件
|
||
|
|
data[j].iconPath = "../../images/marker_red.png";
|
||
|
|
}
|
||
|
|
markers[j] = data[j];
|
||
|
|
}
|
||
|
|
that.setData({
|
||
|
|
markers: markers
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getPosition: function (e) {
|
||
|
|
wx.getLocation({
|
||
|
|
type: 'wgs84',
|
||
|
|
success: (res)=> {
|
||
|
|
var latitude = res.latitude
|
||
|
|
var longitude = res.longitude
|
||
|
|
var speed = res.speed
|
||
|
|
var accuracy = res.accuracy
|
||
|
|
this.setData({ latitude: latitude, longitude: longitude})
|
||
|
|
this.initMap()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|