uni-app 支持多端第三方地圖定位的方法
簡(jiǎn)介
該方法支持跳轉(zhuǎn)第三方地圖并定位指定坐標(biāo)。
APP端跳轉(zhuǎn)至百度地圖(第三方軟件);若無(wú),則跳轉(zhuǎn)至高德地圖(第三方軟件);若均無(wú),則打開騰訊地圖(uni自帶方法:uni.openLocation)
其它端打開騰訊地圖(uni自帶方法:uni.openLocation)
demo
源碼:https://github.com/yapeee/uni-components
測(cè)試數(shù)據(jù):
wgs84: 39.9078008469, 116.391290596
bd09: 39.915547, 116.403909
gcj02: 39.9091591069, 116.3974783161
基礎(chǔ)用法
import Map from '../ms-openMap.js' Map.openMap(latitude, longitude, name, coord_type)
屬性說(shuō)明
| 參數(shù) | 說(shuō)明 | 類型 |
|---|---|---|
| latitude | 緯度(默認(rèn)GCJ-02坐標(biāo)系) | Float |
| longitude | 經(jīng)度(默認(rèn)GCJ-02坐標(biāo)系) | Float |
| name | 地圖標(biāo)注名稱 | String |
| coord_type | 坐標(biāo)類型,可選參數(shù)。示例:gcj02、bd09、wgs84 | String |
實(shí)現(xiàn)方案
首先判斷程序的運(yùn)行平臺(tái),不同的平臺(tái)調(diào)用不同的打開地圖的方法。android和ios平臺(tái)下,判斷并打開百度地圖和高德地圖。其他平臺(tái)下,打開騰訊地圖網(wǎng)頁(yè)版(uni自帶方法)。
一、判斷運(yùn)行平臺(tái)
通過(guò)條件編譯及uni.getSystemInfoSync().platform來(lái)判斷android、ios及其他平臺(tái)。
// #ifdef APP-PLUS
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('運(yùn)行Android上')
openMapByAndroid(latitude, longitude, name)
break;
case 'ios':
console.log('運(yùn)行iOS上')
openMapByIos(latitude, longitude, name)
break;
default:
openMapByDefault(latitude, longitude, name)
console.log('運(yùn)行在開發(fā)者工具上')
break;
}
// #endif
// #ifndef APP-PLUS
openMapByDefault(latitude, longitude, name)
// #endif
tips:
平臺(tái)判斷有2種場(chǎng)景,一種是在編譯期判斷,一種是在運(yùn)行期判斷。
編譯期判斷:即條件編譯,不同平臺(tái)在編譯出包后已經(jīng)是不同的代碼。
運(yùn)行期判斷:運(yùn)行期判斷是指代碼已經(jīng)打入包中,仍然需要在運(yùn)行期判斷平臺(tái),此時(shí)可使用 uni.getSystemInfoSync().platform 判斷客戶端環(huán)境是 Android、iOS 還是小程序開發(fā)工具(在百度小程序開發(fā)工具、微信小程序開發(fā)工具、支付寶小程序開發(fā)工具中使用 uni.getSystemInfoSync().platform 返回值均為 devtools)。
二、APP打開第三方地圖的方法
HTML5+是對(duì)接SDK與頁(yè)面的中間件,用于頁(yè)面通過(guò)js調(diào)用底層的SDK接口。
2.1、 APP判斷第三方應(yīng)用是否存在
/* * appInf: ( ApplicationInf ) 必選 要判斷第三方程序的描述信息 * Android平臺(tái)需要通過(guò)設(shè)置appInf的pname屬性(包名)進(jìn)行查詢。 * iOS平臺(tái)需要通過(guò)設(shè)置appInf的action屬性(Scheme)進(jìn)行查詢,在iOS9以后需要添加白名單才可查詢, * 在manifest.json文件plus->distribute->apple->urlschemewhitelist節(jié)點(diǎn)下添加(如urlschemewhitelist:["weixin"]). */ plus.runtime.isApplicationExist(appInf);
2.1.1、判斷百度地圖應(yīng)用是否存在
plus.runtime.isApplicationExist({pname: 'com.baidu.BaiduMap', action: 'baidumap://'})
2.1.2、判斷高德地圖應(yīng)用是否存在
plus.runtime.isApplicationExist({pname: 'com.autonavi.minimap'},action: 'iosamap://'})
2.2、APP調(diào)用第三方程序打開指定的URL
/* * 說(shuō)明:調(diào)用第三方程序打開指定的URL * 參數(shù): * url: ( String ) 必選 要打開的URL地址 * errorCB: ( OpenErrorCallback ) 可選 打開URL地址失敗的回調(diào) * identity: ( String ) 可選 指定打開URL地址的程序名稱 */ plus.runtime.openURL( url, errorCB, identity );
2.2.1、打開第三方程序?qū)嶋H應(yīng)用
function openURL(url, identity ) {
let newurl = encodeURI(url);
plus.runtime.openURL( newurl, function(res){
uni.showModal({
content: res.message
})
}, identity);
}
2.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.3、打開android高德地圖
url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
identity = 'com.autonavi.minimap'
openURL(url, identity)
2.2.4、打開ios百度地圖
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
openURL(url, identity)
2.2.5、打開ios高德地圖
url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
openURL(url, identity)
三、其他平臺(tái)打開地圖的方法
其他平臺(tái)采用uni.openLocation(OBJECT)方法使用應(yīng)用內(nèi)置地圖查看位置。
uni.openLocation({
latitude: latitude,
longitude: longitude,
name: name,
fail: () => {
uni.showModal({
content: '打開地圖失敗,請(qǐng)重'
})
},
})
更新日志
2020-01-02
支持BD-09(百度坐標(biāo))、GCJ-02(高德、騰訊)、WGS-84(GPS坐標(biāo))坐標(biāo)系。
2019.12.10
第一次發(fā)布,支持跳轉(zhuǎn)第三方地圖并定位指定坐標(biāo)。
參考
百度地圖URI API
高德地圖URI API
uni-app HTML5+ API
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript canvas繪制圓形加載進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制圓形加載進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06
javascript中的注釋使用與注意事項(xiàng)小結(jié)
在javascript中有兩種注釋方式,單行注釋與多行注釋。2011-09-09
Taro UI框架開發(fā)小程序?qū)崿F(xiàn)左滑喜歡右滑不喜歡效果的示例代碼
這篇文章主要介紹了Taro UI開發(fā)小程序?qū)崿F(xiàn)左滑喜歡右滑不喜歡效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
淺析對(duì)JS中方法unshift和push方法的理解
JavaScript中的`unshift`和`push`方法用于在數(shù)組的開始和結(jié)尾添加元素,它們會(huì)直接修改原數(shù)組并返回新的數(shù)組長(zhǎng)度,本文介紹JS中方法unshift和push方法的相關(guān)知識(shí),感興趣的朋友一起看看吧2024-12-12
JavaScript中alert的使用方法超詳細(xì)介紹
JS中的alert作用是在瀏覽器中彈出一個(gè)警告框,而使用alert有三種方式,不同的方式所呈現(xiàn)的效果也不相同,這篇文章主要給大家介紹了關(guān)于JavaScript中alert使用方法的相關(guān)資料,需要的朋友可以參考下2024-01-01

