热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了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 坐标类型,可选参数。示例: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

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


推荐阅读
  • uniapp分销商城源码开发
    什么是分销商城简单来说,就是企业利用无线裂变分销功能的商城系统来发展分销商,管理分销商销售、产品、订单、物流、客户等。如活跃在微信朋友圈中的微商城就是 ... [详细]
  • 作为国内首家专注于小顺序范畴的后端云效劳,晓得云正式开启3.0设计——全平台Serverless效劳。「晓得云」cloud.minapp.com,诞生于2017年8月8日,是国内第 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • 团队作业第二次—项目选题报告(追光的人)
    所属课程软件工程1916作业要求团队作业第二次—项目选题报告团队名称追光的人作业目标组员提出选题,大家挑选出可行性最高的进行分析,制作选题报告和选题PPT目录队员贡献分比例选题报告 ... [详细]
  • Android-基于云信实现语音通话功能对于这几个方法的具体解释可以看云信信令的文档,或者这查看方法源码的注释如果是接受对方邀请并且加入频道成功之后,那么可以直接调用加入音视频房间 ... [详细]
  • HBuilderX入门教程
    本帖文章已集成到:hx产品文档HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能,清爽的界面,强大的 ... [详细]
  • 适合编程初学者的开源博客系统(Vue3+Vant版)
    目标为编程初学者打造入门学习项目,使用各种主流编程语言来实现。让想学编程的,一个都不落下。上述基本涵盖了当前编程开发所有主流语言。左侧为前端版本&# ... [详细]
  • uniapp 框架简介和生命周期
    介绍:uni-app使用vue的语法小程序的标签和API。也就是和这些语法同样作用的框架.生命周期,分为应用生命周期和页面生命周期,和小程序的基本一致.流程开发规范为了实现多 ... [详细]
  • 文|Tech星球(微信ID:tech618)尹非凡一位微信的产品经理告诉Tech星球,据传,在小程序刚做出来的时候,张小龙认 ... [详细]
  • 本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 【Windows】实现微信双开或多开的方法及步骤详解
    本文介绍了在Windows系统下实现微信双开或多开的方法,通过安装微信电脑版、复制微信程序启动路径、修改文本文件为bat文件等步骤,实现同时登录两个或多个微信的效果。相比于使用虚拟机的方法,本方法更简单易行,适用于任何电脑,并且不会消耗过多系统资源。详细步骤和原理解释请参考本文内容。 ... [详细]
  • 为什么说支付宝小程序更适合商家?除了离钱更近,还有四大优势!
    varis_mobinavigator.userAgent.toLowerCase().match((ipod|iphone|android|coolpad|mmp|smartph ... [详细]
author-avatar
薇薇llfnc
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有