uniapp H5 打开地图 并选中标记点
- 先上代码
//打开地图 显示景区位置openMap() {// 支付宝// #ifdef MP-ALIPAYmy.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-WEIXINuni.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 H5uni.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
高德官网 -
更多参数
-
搞定 复制可用!感谢您的浏览!