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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
微信开发 微信授权详解
Oct 21 Javascript
js实现简易聊天对话框
Aug 17 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
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
跟我学Laravel之安装Laravel
2014/10/15 PHP
php集成动态口令认证
2016/07/21 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
五一服装活动方案
2014/01/11 职场文书
一年级语文教学反思
2014/02/13 职场文书
优质服务演讲稿
2014/05/14 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python