H5网页在ios，android，微信中打开手机中的地图导航

需求

• 一个H5页面需要实现在ios的浏览器，android的浏览器以及微信中打开时支持打开手机的地图导航。

实现

let url = ''
if (myBrowser1() === 'android') { // 判断是安卓环境
    url = `androidamap://navi?sourceApplication=amap&poiname=&lat=${center[1]}&lon=${center[0]}&dev=1&style=2`
} else if(myBrowser1() === 'ios') { // 判断是ios环境
    url = `iosamap://navi?sourceApplication=amap&poiname=&poiid=&lat=${center[1]}&lon=${center[0]}&dev=1&style=2`
} else { // 判断是微信的环境，要使用openLocation需要先通过后台接口拿到ticket生成签名，并且在wx.config中配置jsApiList。
    wx.openLocation({
        latitude: center[1], // 纬度，浮点数，范围为90 ~ -90
        longitude: center[0], // 经度，浮点数，范围为180 ~ -180。
        name: place, // 位置名
        address: '', // 地址详情说明
        scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
    });
}
url && window.location.replace(url)

小结

• 如果是自己公司做的安卓或者ios的app嵌入H5的页面，可以让安卓和ios壳子向H5页面注入相关的导航方法，这样会更好用