One, display the map
<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>Second, get the current location
When controlling the display area size of the map, if you want to display the map in full screen on the phone, using the usual px or directly using the percentage is invalid for the full screen height. At this time, you can use the unit vh. The default full screen of the entire screen is 100vh , so change The height of the map is set to 100vh, and the width is set to 100%.
As you can see here, longitude and latitude are both to get the current location point. At this time, you need to use wx.getLocation({}) to get the current longitude and latitude, and then pass it to the view page.
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
})
}
})
},Three, set in app.json
"permission": {
"scope.userLocation": {
"desc": "获取位置，方便按区域分配 "
}
},Fourth, the effect
The relevant map is not accurate on the computer, and can be viewed on the real phone on the mobile phone.