uniapp H5 打开地图 并选中标记点
- 先上代码
//打开地图 显示景区位置
openMap() {
// 支付宝
// #ifdef MP-ALIPAY
my.openLocation({
longitude: Number(this.detailObj.longitude), // 经度
latitude: Number(this.detailObj.latitude), // 纬度
name: this.detailObj.scenicName, // 标点名称
address: this.detailObj.address, // 标点地址
success: res => {
// console.log(res);
},
fail: res => {
// console.log(res);
},
});
// #endif
// 小程序
// #ifdef MP-WEIXIN
uni.openLocation({
latitude: Number(this.detailObj.latitude), // 纬度
longitude: Number(this.detailObj.longitude), // 经度
name: this.detailObj.scenicName, // 标点名称
success: function() {}
});
// #endif
// H5------------------------------------------------------------------------------
// this.detailObj.latitude // 纬度
// this.detailObj.longitude // 经度
// this.detailObj.scenicName // 标点名称
// #ifdef H5
uni.navigateTo({
url:'/pages/webpage/webpage?urlEncode='+ encodeURIComponent(`https://uri.amap.com/marker?position=${this.detailObj.longitude},${this.detailObj.latitude}&name=${this.detailObj.scenicName}`)
})
// #endif
},
- webview 页面
/pages/webpage/webpage
<template>
<view>
<web-view :webview-styles="webviewStyles" :src="urlSrc"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
urlSrc:'',
webviewStyles: {
progress: {
color: '#ff4643'
}
},
};
},
onLoad(options) {
if(options.urlEncode){
this.urlSrc = decodeURIComponent(options.urlEncode)
return
}
}
}
</script>
-
这是高德提供的免费地址
https://uri.amap.com/marker
高德官网 -
更多参数
-
搞定 复制可用!感谢您的浏览!