簡介
該方法支持跳轉第三方地圖并定位指定坐標。愛掏網 - it200.com
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 | 坐標類型,可選參數。愛掏網 - it200.com示例:gcj02、bd09、wgs84 | String |
實現方案
首先判斷程序的運行平臺,不同的平臺調用不同的打開地圖的方法。愛掏網 - it200.comandroid和ios平臺下,判斷并打開百度地圖和高德地圖。愛掏網 - it200.com其他平臺下,打開騰訊地圖網頁版(uni自帶方法)。愛掏網 - it200.com
一、判斷運行平臺
通過條件編譯及uni.getSystemInfoSync().platform來判斷android、ios及其他平臺。愛掏網 - it200.com
// #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種場景,一種是在編譯期判斷,一種是在運行期判斷。愛掏網 - it200.com
編譯期判斷:即條件編譯,不同平臺在編譯出包后已經是不同的代碼。愛掏網 - it200.com
運行期判斷:運行期判斷是指代碼已經打入包中,仍然需要在運行期判斷平臺,此時可使用 uni.getSystemInfoSync().platform 判斷客戶端環境是 Android、iOS 還是小程序開發工具(在百度小程序開發工具、微信小程序開發工具、支付寶小程序開發工具中使用 uni.getSystemInfoSync().platform 返回值均為 devtools)。愛掏網 - it200.com
二、APP打開第三方地圖的方法
HTML5+是對接SDK與頁面的中間件,用于頁面通過js調用底層的SDK接口。愛掏網 - it200.com
2.1、 APP判斷第三方應用是否存在
/* * appInf: ( ApplicationInf ) 必選 要判斷第三方程序的描述信息 * Android平臺需要通過設置appInf的pname屬性(包名)進行查詢。愛掏網 - it200.com * iOS平臺需要通過設置appInf的action屬性(Scheme)進行查詢,在iOS9以后需要添加白名單才可查詢, * 在manifest.json文件plus->distribute->apple->urlschemewhitelist節點下添加(如urlschemewhitelist:["weixin"]). */ plus.runtime.isApplicationExist(appInf);
2.1.1、判斷百度地圖應用是否存在
plus.runtime.isApplicationExist({pname: 'com.baidu.BaiduMap', action: 'baidumap://'})
2.1.2、判斷高德地圖應用是否存在
plus.runtime.isApplicationExist({pname: 'com.autonavi.minimap'},action: 'iosamap://'})
2.2、APP調用第三方程序打開指定的URL
/* * 說明:調用第三方程序打開指定的URL * 參數: * url: ( String ) 必選 要打開的URL地址 * errorCB: ( OpenErrorCallback ) 可選 打開URL地址失敗的回調 * identity: ( String ) 可選 指定打開URL地址的程序名稱 */ plus.runtime.openURL( url, errorCB, identity );
2.2.1、打開第三方程序實際應用
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)
三、其他平臺打開地圖的方法
其他平臺采用uni.openLocation(OBJECT)方法使用應用內置地圖查看位置。愛掏網 - it200.com
uni.openLocation({ latitude: latitude, longitude: longitude, name: name, fail: () => { uni.showModal({ content: '打開地圖失敗,請重' }) }, })
更新日志
2024-01-02
支持BD-09(百度坐標)、GCJ-02(高德、騰訊)、WGS-84(GPS坐標)坐標系。愛掏網 - it200.com
2024.12.10
第一次發布,支持跳轉第三方地圖并定位指定坐標。愛掏網 - it200.com
參考
百度地圖URI API
高德地圖URI API
uni-app HTML5+ API
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。愛掏網 - it200.com