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頁面注入相關的導航方法，這樣會更好用