Recently, in the process of developing byte applets, I encountered the need for map navigation. I believe everyone will encounter it, so I compiled a dry article for you.
The following is the code case I compiled --------- remember to drink water (too " dry ", copy can be used).
The renderings are as follows:
1. Click the icon to pop up a pop-up box to select
2. After the selection is complete, jump to the third-party software
3. Navigate in third-party software
HTML part:
<map style="width: 100%; height: 300px;"
:latitude="startposition.lat"
:longitude="startposition.lng"
:markers="covers"
@markertap="openMap(startposition.lat,startposition.lng,initFoemdata.title)"
>
</map>latitude and longitude and markers are the latitude and longitude of the location
markertap is icon click event
DATA data part:
startposition and the latitude and longitude of an opened map, covers is the latitude and longitude of the destination point, and the label is the text content below. iconPath is the image import path of the icon
// 地图
startposition: {
lng: 123.054145,
lat: 41.160569
},
covers: [{
latitude: 41.160569,
longitude: 123.054145,
iconPath: "../../static/map1.png",
label: {
content: 'Jeskson',
color: '#fff',
fontSize: 12,
borderRadius: 5,
padding: 5,
textAlign: 'center',
bgColor: '#2979ff',
},
}]JS logic part:
The above picture shows the initialization assignment of data, which you can define according to your own interface or data
The figure below shows the code to open the third-party map software
// 打开的点击事件，传经纬度和地点名
openMap(latitude,longitude,name){
// 打开第三方 （小程序）
uni.getLocation({
success(res) {
uni.openLocation({
latitude: latitude,
longitude: longitude,
scale: 15
});
}
});
}Congratulations, you can realize the function of map navigation after completing the above steps
Note that this code is only applicable to Mini Program H5 and APP is not compatible
The last creation is not easy to reprint, please link, thank you!