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

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

簡(jiǎn)介

該方法支持跳轉(zhuǎn)第三方地圖并定位指定坐標(biāo)。

APP端跳轉(zhuǎn)至百度地圖（第三方軟件）；若無(wú)，則跳轉(zhuǎn)至高德地圖（第三方軟件）；若均無(wú)，則打開(kāi)騰訊地圖（uni自帶方法：uni.openLocation）
其它端打開(kāi)騰訊地圖（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)用不同的打開(kāi)地圖的方法。android和ios平臺(tái)下，判斷并打開(kāi)百度地圖和高德地圖。其他平臺(tái)下，打開(kā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)行在開(kāi)發(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 還是小程序開(kāi)發(fā)工具（在百度小程序開(kāi)發(fā)工具、微信小程序開(kāi)發(fā)工具、支付寶小程序開(kāi)發(fā)工具中使用 uni.getSystemInfoSync().platform 返回值均為 devtools）。

二、APP打開(kāi)第三方地圖的方法

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)用第三方程序打開(kāi)指定的URL

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

2.2.1、打開(kāi)第三方程序?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、打開(kāi)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、打開(kāi)android高德地圖

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

2.2.4、打開(kāi)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、打開(kāi)ios高德地圖

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

三、其他平臺(tái)打開(kāi)地圖的方法

其他平臺(tái)采用uni.openLocation(OBJECT)方法使用應(yīng)用內(nèi)置地圖查看位置。

uni.openLocation({
  latitude: latitude,
  longitude: longitude,
  name: name,
  fail: () => {
    uni.showModal({
      content: '打開(kāi)地圖失敗,請(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í)有所幫助，也希望大家多多支持我們。

上一篇：在weex中愉快的使用scss的方法步驟

欄目：JavaScript

下一篇：JS實(shí)現(xiàn)普通輪播圖特效

本文標(biāo)題：uni-app 支持多端第三方地圖定位的方法