【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