需求描述:h5页面根据地理位置,选择地图类型,打开对应app并标注地理位置。
遇到问题:只有在浏览器中才可以实现打开已安装地图app,其他类似微信内置浏览器则不能直接打开地图app。
解决方式:放弃直接打开地图app,通过跳转对应地图移动端页面,由其负责打开app应用。
获取跳转链接方法
/**
* 根据地图类型、位置获取不同的地图页面跳转链接
* @param {*} mapType 地图类型
* @param {*} location 经纬度 lat:纬度 lng:经度
* @param {*} address 详细地址
*/
getMapApp(mapType, location, address) {
const { lat, lng } = location;
let url = '';
switch(mapType) {
case '腾讯地图':
url = 'https://apis.map.qq.com/uri/v1/marker?marker=coord:' + lat + ',' + lng +';addr:'+ address +';title:地址&referer=keyfree';
break;
case '高德地图':
url = 'https://uri.amap.com/marker?position='+ lng + ',' + lat +'&name='+ address +'&callnative=1';
break;
case '百度地图':
url = 'http://api.map.baidu.com/marker?location=' + lat + ',' + lng +'&title=地址&content='+ address +'&output=html&src=webapp.reformer.appname&coord_type=gcj02';
break;
default:
break;
}
return url;
}
api文档地址
腾讯地图:https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebMarker
高德地图:https://developer.amap.com/api/uri-api/guide/mobile-web/point