一,显示地图
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}"
bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location style="width:100%;height:350px;">
</map>
二,获取当前位置
在对地图进行控制显示区域大小时,想将地图全屏显示在手机上,使用平时的px或者直接使用百分比对于高度全屏无效,这时候可以通过vh这个单位,整个屏幕默认满屏为100vh,所以将地图的高度设置为100vh,宽度设置为100%即可。
看到这里,经度和纬度都是要获取当前的定位点,这时,就需要用到wx.getLocation({}),来获取当前所在的经纬度,然后传给视图页。
data: {
latitude:0,
longitude:0,
markers: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
wx.getLocation({
type:"wgs84",
success:res=>{
console.log('纬度',res.latitude)
console.log('经度',res.longitude)
that.setData({
latitude:res.latitude,
longitude:res.longitude
})
}
})
},
三,在app.json设置
"permission": {
"scope.userLocation": {
"desc": "获取位置,方便按区域分配 "
}
},
四,效果
相关地图在电脑上不太准确,具体可到手机上真机查看