1.地图的使用
在wxml文件中使用地图,动态设置中心点位置和地图大小等信息。
<map id="map"
longitude="{
{longitude}}"
latitude="{
{latitude}}"
scale="14"
controls="{
{controls}}"
markers="{
{markers}}"
polyline="{
{polyline}}"
bindcontroltap="controltap"
bindmarkertap="markertap"
bindregionchange="regionchange"
show-location
style="width: {
{map_width}}px; height: {
{map_height}}px;"
data-statu="open">
</map>
2.地图定位和设置地图大小
可以使用小程序的定位接口实现当前位,在app.js中进行封装获取当前位置的方法,要在<map>中设置show-location属性。
/**
*@param {function} cb 处理地理位置
*/
getLocationInfo: function(cb) {
var that = this;
if (this.globalData.locationInfo) {
cb(this.globalData.locationInfo)
} else {
wx.getLocation({
type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
success: function(res) {
that.globalData.locationInfo = res;
cb(that.globalData.locationInfo)
},
fail: function(res) {
console.log(res);
}
})
}
},
调用,onShow每次显示页面时调用一次,动态设置地图大小,获取当前位置信息并且查询当前位置周边设备信息。
data: {
showModalStatus: false, // 弹窗
map_width: 0,
map_height: 0,
longitude: 0, // 经度
latitude: 0, //纬度
markers: [],
polyline: [],
distance: 0, // 距离
cost: 0, // 花费时长
cle