Look at the code first, just copy and use it. You will see the following effects:
Note: The icon icon needs to be downloaded and replaced by yourself. In addition, there may be online times when calling my local map key. Please use and debug no more than 50 times! If there is no effect, please note that the error message may be called online请自行在高德地图申请密钥
<template>
<view class="box">
<map name="" :markers="markers"></map>
</view>
</template>
<script>
export default {
data() {
return {
addressA:"北京市昌平区", //标记点A
addressB:"天津市西青区", //标记点B 其他多点或单点请自行尝试
list:[],
markers:[
{
//标记点A 的信息
iconPath: "../../static/weizhi.png", //图标
id: 0,
width: 20, //图标icon 宽度
height: 28 //图标icon 高度
},
{
iconPath: "../../static/weizhi3.png",
id: 1,
width: 20,
height: 28
}
]
}
},
methods: {
map() {
let _this = this
var key = "ff309ed17221397704ae790a6dacea43"; //地图密钥 请注意调用次数 或自行在高德地图申请密钥
var URL =
"https://restapi.amap.com/v3/geocode/geo?batch=true&address=" +
_this.addressA + //标记点A
"|" +
_this.addressB + //标记点B
"&key=" +
key;
uni.request({
url:URL,
success(res) {
_this.list = res.data.geocodes //获取到地图信息
_this.markers[0].longitude =Number(_this.list[0].location.split(",")[0]) //标记点A经度
_this.markers[0].latitude = Number(_this.list[0].location.split(",")[1]) //标记点A纬度
_this.markers[1].longitude = Number(_this.list[1].location.split(",")[0]) //标记点B经度
_this.markers[1].latitude = Number(_this.list[1].location.split(",")[1]) //标记点B纬度
console.log(_this.markers[0],_this.markers[1]) //完整的标记信息
}
})
},
},
onLoad() {
let _this = this;
_this.map() //需要自执行
}
}
</script>
<style lang="scss" scoped>
.box {
width: 100%;
height: 100%;
}
map {
width: 100%;
height: 1000rpx;
color: red;
}
</style>
If you have any questions about uniapp or you don’t understand this method, you can leave a message, I will reply as soon as possible and help you solve it.