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


Posted in Javascript onJanuary 03, 2020

简介

该方法支持跳转第三方地图并定位指定坐标。

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 坐标类型,可选参数。示例:gcj02、bd09、wgs84 String

实现方案

首先判断程序的运行平台,不同的平台调用不同的打开地图的方法。android和ios平台下,判断并打开百度地图和高德地图。其他平台下,打开腾讯地图网页版(uni自带方法)。

一、判断运行平台

通过条件编译及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)。

二、APP打开第三方地图的方法

HTML5+是对接SDK与页面的中间件,用于页面通过js调用底层的SDK接口。

2.1、 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.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)方法使用应用内置地图查看位置。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jQuery聚合函数实例
May 21 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
vue实现登录功能
Dec 31 Vue.js
基于JavaScript实现随机点名器
Feb 25 Javascript
Vue 实现登录界面验证码功能
Jan 03 #Javascript
JS实现扫码枪扫描二维码功能
Jan 03 #Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 #Javascript
uni-app如何实现增量更新功能
Jan 03 #Javascript
JS实现简单日历特效
Jan 03 #Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 #Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 #Javascript
You might like
2019十大人气国漫
2020/03/13 国漫
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JavaScript继承方式实例
2010/10/29 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
javascript this详细介绍
2016/09/19 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
python交换两个变量的值方法
2019/01/12 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
python用requests实现http请求代码实例
2019/10/31 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
设计模式的基本要素是什么
2014/04/21 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
小学生新学期寄语
2014/01/19 职场文书
运动会广播稿150字
2014/02/19 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
超市客服工作职责
2014/06/11 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
上诉答辩状范文
2015/05/22 职场文书