看了高德地图的官方文档：
//安卓版手机
<a href="androidamap://navi?sourceApplication=appname&poiname=fangheng&lat=36.547901&lon=104.258354&dev=1&style=2">高德导航(安卓版)</a>
//ios版手机
<a href="iosamap://navi?sourceApplication=appname&poiname=fangheng&lat=36.547901&lon=104.258354&dev=1&style=2">高德导航(IOS版)</a>
注：通过官方文档看了安卓版没啥限制直接就可以通过a标签唤起高德地图，但ios有很多限制，我只是把平台术语换成（iosamap）就可以了
这里有很多坑
- 在微信浏览器里是无法生效的，必须通过本地浏览器打开（其他浏览器未测试）
- 必须是点击a标签才能生效
- window.location.href = 'xxx'(
这种方式无效) - 用Vue的computed也是
无效的 - 用Vue的动态响应式数据也是
无效的 - 通过创建该元素，赋值href，触发click,这种也是
无效的 - 用DOM创建该元素，通过把元素添加到页面上
有效
1.无效
window.location.href = 'xxx'
2.无效
computed:{
url(){
return 'xx'
}}
3.无效
data(){
return{
url:"xxx"
}}
4.无效
const el = document.createElement("a")
5.有效
parent.innerHTML= `<a href='xx'> </a>`
其他代码（uniapp）
<template>
<view id="containerMap">
<text>高德地图</text>
<button @click="gd(1)">导航模式</button>
<button @click="gd(2)">单点标注模式</button>
<text>腾讯地图</text>
<button @click="tx(1)">导航模式</button>
<button @click="tx(2)">单点标注模式</button>
<text>百度地图</text>
<button @click="bd(1)">导航模式</button>
<button @click="bd(2)">单点标注模式</button>
<button @click="gdBtn">高德地图</button>
<a href="iosamap://navi?sourceApplication=appname&poiname=四川大学华西医院&lat=30.64725&lon=104.06752&dev=1&style=2">开始导航IOS</a>
-----
<a href="androidamap://navi?sourceApplication=appname&poiname=四川大学华西医院&lat=30.64725&lon=104.06752&dev=1&style=2">高德地图Android</a>
------------------------------------------------------------------------------------------------------------------------------------------------
<!-- <a :href="url">adsdasd</a> -->
<view class="box" ref="box"></view>
</view>
</template>
<script>
export default {
computed: {
url() {
return 'iosamap://navi?sourceApplication=appname&poiname=四川大学华西医院&lat=30.64725&lon=104.06752&dev=1&style=2';
}
},
onReady() {
const el = document.querySelector('.box');
el.innerHTML = `<a href='iosamap://navi?sourceApplication=appname&poiname=四川大学华西医院&lat=30.64725&lon=104.06752&dev=1&style=2'>请点击我</a>`;
console.log(el);
},
methods: {
gd(n) {
if (n == 1) {
window.location.href = `https://uri.amap.com/navigation?from=103.95786,30.56668,我的位置&to=104.07279,30.66336,成都双流国际机场&mode=driving&policy=1&src=mypage&coordinate=gaode&callnative=1`;
} else {
window.location.href = `https://uri.amap.com/marker?position=103.95786,30.56668&name=$成都双流国际机场&src=mypage&coordinate=gaode&callnative=1`;
}
},
tx(n) {
let mobileUrl = '';
let h5Url = '';
if (n == 1) {
mobileUrl = `qqmap://map/routeplan?type=drive&from=我的位置&fromcoord=104.07279,30.66336&to=成都双流国际机场&tocoord=103.95786,30.56668&referer=LQFBZ-OJGC2-L3GUN-CBPY2-DAPZE-NDB7C`;
h5Url = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=104.07279,30.66336&to=成都双流国际机场&tocoord=103.95786,30.56668&policy=1&referer=LQFBZ-OJGC2-L3GUN-CBPY2-DAPZE-NDB7C`;
} else {
mobileUrl = `qqmap://map/marker?marker=coord:104.07279,30.66336;title:成都双流国际机场;addr:成都双流国际机场&referer=LQFBZ-OJGC2-L3GUN-CBPY2-DAPZE-NDB7C`;
h5Url = `https://apis.map.qq.com/uri/v1/marker?marker=coord:104.07279,30.66336;title:成都双流国际机场;addr:成都双流国际机场&referer=LQFBZ-OJGC2-L3GUN-CBPY2-DAPZE-NDB7C`;
}
window.location.href = mobileUrl;
window.setTimeout(() => {
window.location.href = h5Url;
}, 1000);
},
bd(n) {
const urlCollect = {};
if (n) {
const uri = `direction?origin=latlng:103.95786,30.56668|name:我的位置
&destination=latlng:104.07279,30.66336|name:天府广场&mode=driving&origin_region=成都国际机场&destination_region=天府广场`;
urlCollect.H5 = `https://api.map.baidu.com/${uri}&src=webapp.baidu.openAPIdemo&output=html`;
urlCollect.Android = `bdapp://map/${uri}&src=andr.baidu.openAPIdemo`;
urlCollect.IOS = `baidumap://map/${uri}&src=ios.baidu.openAPIdemo`;
} else {
const uri = `marker?location=103.95786,30.56668&title=成都国际机场&content=成都国际机场`;
urlCollect.H5 = `https://api.map.baidu.com/${uri}&output=html&src=webapp.baidu.openAPIdemo`;
urlCollect.Android = `bdapp://map/${uri}&src=andr.baidu.openAPIdemo`;
urlCollect.IOS = `baidumap://map/${uri}&src=ios.baidu.openAPIdemo`;
}
window.location.href = urlCollect['H5'];
},
gdBtn() {
const a = document.createElement('a');
const platform = uni.getSystemInfoSync().platform;
if (platform == 'ios') {
a.href = 'iosamap://navi?sourceApplication=appname&poiname=四川大学华西医院&lat=30.64725&lon=104.06752&dev=1&style=2';
} else {
a.href = 'androidamap://navi?sourceApplication=appname&poiname=四川大学华西医院&lat=30.64725&lon=104.06752&dev=1&style=2';
}
a.click();
}
}
};
</script>
<style scoped lang="scss">
#containerMap {
}
</style>
官方文档地址：lbs.amap.com/api/amap-mo…
