先看代码,复制使用即可。您将看到以下效果:
注意:icon图标需要自行下载并替换,此外调用我本地的地图密钥可能有上线次数,请使用调试不要超过50次!如果无法出现效果 请注意报错信息 可能是调用上线 请自行在高德地图申请密钥
<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>
其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。