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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
详解js中的原型,原型对象,原型链
Jul 16 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
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php验证码生成代码
2015/11/11 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
基督教婚礼主持词
2014/03/14 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
表扬信范文
2015/05/04 职场文书