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 相关文章推荐
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
详解js类型判断
May 22 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
js压缩利器
2007/02/20 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
用Python编写web API的教程
2015/04/30 Python
python3调用R的示例代码
2018/02/23 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python中的逆序遍历实例
2019/12/25 Python
Django values()和value_list()的使用
2020/03/31 Python
Python 在局部变量域中执行代码
2020/08/07 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
如何强制垃圾回收
2015/10/06 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
母亲追悼会答谢词
2014/01/27 职场文书
参赛口号
2014/06/16 职场文书
军事博物馆观后感
2015/06/05 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis