Simple small program to achieve Map
The official document: https://developers.weixin.qq.com/miniprogram/dev/component/map.html
map.wxml:
< View > < Map ID = "Map" longitude = "{{acquired coordinate}}" Latitude = "{{acquired coordinate}}" Scale = "14" Show-LOCATION style = "width: 100%; height: 300px by; " > </ Map > </ View >
map.js:
Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }], polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color:"#FF0000DD", width: 2, dottedLine: true }], controls: [{ id: 1, iconPath: '/resources/location.png', position: { left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true }] }, regionchange(e) { console.log(e.type) }, markertap(e) { console.log(e.markerId) }, controltap(e) { console.log(e.controlId) } })
As the map applications that require access to personal information, the information needs to be set
"Permission": {
"scope.userLocation": {
"desc": "Your location will be used applets map to show" // descriptive information
}
}
When the page loads, call to get the Geolocation API
wx.getLocation({ type: 'wgs84', success (res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy } })
About resolution rpx