【uni-app】支持多端第三方地圖定位的方法

簡介

該方法支持跳轉第三方地圖並定位指定座標。

APP端跳轉至百度地圖（第三方軟件）；若無，則跳轉至高德地圖（第三方軟件）；若均無，則打開騰訊地圖（uni自帶方法：uni.openLocation）
其它端打開騰訊地圖（uni自帶方法：uni.openLocation）

demo

源碼：https://github.com/yapeee/uni-components

測試數據：
wgs84: 39.9078008469, 116.391290596
bd09: 39.915547, 116.403909
gcj02: 39.9091591069, 116.3974783161

基礎用法

import Map from '../ms-openMap.js'
Map.openMap(latitude, longitude, name, coord_type)

屬性說明

參數	說明	類型
latitude	緯度（默認GCJ-02座標系）	Float
longitude	經度（默認GCJ-02座標系）	Float
name	地圖標註名稱	String
coord_type	座標類型，可選參數。示例：gcj0二、bd0九、wgs84	String

實現方案

首先判斷程序的運行平臺，不一樣的平臺調用不一樣的打開地圖的方法。android和ios平臺下，判斷並打開百度地圖和高德地圖。其餘平臺下，打開騰訊地圖網頁版（uni自帶方法）。

1、判斷運行平臺

經過條件編譯及uni.getSystemInfoSync().platform來判斷android、ios及其餘平臺。

// #ifdef APP-PLUS
switch(uni.getSystemInfoSync().platform){
    case 'android':
        console.log('運行Android上')
        openMapByAndroid(latitude, longitude, name)
        break;
    case 'ios':
        console.log('運行iOS上')
        openMapByIos(latitude, longitude, name)
        break;
    default:
        openMapByDefault(latitude, longitude, name)
        console.log('運行在開發者工具上')    
        break;
}    
// #endif
// #ifndef APP-PLUS
openMapByDefault(latitude, longitude, name)
// #endif

tips：

平臺判斷有2種場景，一種是在編譯期判斷，一種是在運行期判斷。

編譯期判斷：即條件編譯，不一樣平臺在編譯出包後已是不一樣的代碼。

運行期判斷：運行期判斷是指代碼已經打入包中，仍然須要在運行期判斷平臺，此時可以使用 uni.getSystemInfoSync().platform 判斷客戶端環境是 Android、iOS 仍是小程序開發工具（在百度小程序開發工具、微信小程序開發工具、支付寶小程序開發工具中使用 uni.getSystemInfoSync().platform 返回值均爲 devtools）。

2、APP打開第三方地圖的方法

HTML5+是對接SDK與頁面的中間件，用於頁面經過js調用底層的SDK接口。

2.一、 APP判斷第三方應用是否存在

/*
 * appInf: ( ApplicationInf ) 必選 要判斷第三方程序的描述信息
 * Android平臺須要經過設置appInf的pname屬性（包名）進行查詢。 
 * iOS平臺須要經過設置appInf的action屬性（Scheme）進行查詢，在iOS9之後須要添加白名單纔可查詢，
 * 在manifest.json文件plus->distribute->apple->urlschemewhitelist節點下添加（如urlschemewhitelist:["weixin"]）.
 */
plus.runtime.isApplicationExist(appInf);

2.1.一、判斷百度地圖應用是否存在

plus.runtime.isApplicationExist({pname: 'com.baidu.BaiduMap', action: 'baidumap://'})

2.1.二、判斷高德地圖應用是否存在

plus.runtime.isApplicationExist({pname: 'com.autonavi.minimap'},action: 'iosamap://'})

2.二、APP調用第三方程序打開指定的URL

/*
 * 說明：調用第三方程序打開指定的URL
 * 參數：
 * url: ( String ) 必選 要打開的URL地址
 * errorCB: ( OpenErrorCallback ) 可選 打開URL地址失敗的回調
 * identity: ( String ) 可選 指定打開URL地址的程序名稱
 */
plus.runtime.openURL( url, errorCB, identity );

2.2.一、打開第三方程序實際應用

function openURL(url, identity ) {
    let newurl = encodeURI(url);
    plus.runtime.openURL( newurl, function(res){
        uni.showModal({
            content: res.message
        })
    }, identity);
}

2.2.二、打開android百度地圖

url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
identity = 'com.baidu.BaiduMap'
openURL(url, identity)

2.2.三、打開android高德地圖

url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
identity = 'com.autonavi.minimap'
openURL(url, identity)

2.2.四、打開ios百度地圖

url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
openURL(url, identity)

2.2.五、打開ios高德地圖

url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
openURL(url, identity)

3、其餘平臺打開地圖的方法

其餘平臺採用uni.openLocation(OBJECT)方法使用應用內置地圖查看位置。

uni.openLocation({
    latitude: latitude,
    longitude: longitude,
    name: name,
    fail: () => {
        uni.showModal({
            content: '打開地圖失敗,請重'
        })
    },
})

更新日誌

2020-01-02
支持BD-09（百度座標）、GCJ-02（高德、騰訊）、WGS-84（GPS座標）座標系。

2019.12.10

第一次發佈，支持跳轉第三方地圖並定位指定座標。

參考

百度地圖URI API
高德地圖URI API
uni-app HTML5+ API