有关在Vue中JS如何在H5移动端如何调起第三方地图软件(高德、腾讯、百度)

news/2025/1/10 23:11:53/

一、 首先封装区分当前环境是ios端还是android端的方法

    RunningPlatform() {let ua = navigator.userAgent.toLowerCase()console.log('内核', ua);// iosif(ua.indexOf('like mac os x') > -1) {this.OS = 'IOS'}// androidif(ua.indexOf('android') > -1) {this.OS = 'Android'}console.log('OS', this.OS)},

二、封装根据当前运行环境来调起地图的方法

至于JS能否可以检测出来用户手机是否安装了某一APP软件,尚待解决。。。

1. 腾讯地图

官方文档

  1. 接口调用说明
    适用于在手机端APP 和 手机浏览器中,调起腾讯地图APP。iOS通过scheme调用,Android使用Intent调用,统一协议为:qqmap://map/
    2.JS调用方法: 直接通过 location.href 调用列如官方所给示例的链接即可
    3.封装
    tengxun() {// 使用周边搜索功能console.log('腾讯');// https://lbs.qq.com/webApi/uriV1/uriGuide/uriMobileRouteif (this.OS === 'IOS') {console.log('IOS');location.href = `qqmap://map/search?keyword=需搜索的关键词&center=搜索区域中间点坐标8&radius=搜索范围&referer=开发者key值`}if (this.OS === 'Android') {console.log('Android');location.href = `qqmap://map/search?keyword=需搜索的关键词&center=搜索区域中间点坐标8&radius=搜索范围&referer=开发者key值`}	},
2. 百度地图

官方文档

  1. 简介: 开发者只需按照URI API接口规范构造一条标准的URI,便可在PC&移动浏览器端或者移动开发应用中直接调起百度地图产品(如百度web地图、百度地图客户端)进行地图显示或检索、线路查询、导航等功能,满足开发者实现特定业务场景下直接调用地图产品实现应用请求,
  2. 协议:
    安卓: baidumap://map/
    ios: baidumap://map/
  3. JS调用方法: 直接通过 location.href 调用列如官方所给示例的链接即可
  4. 封装
    baidu() {// 使用关键词搜索功能console.log('百度');// https://lbsyun.baidu.com/index.php?title=uriif (this.OS === 'IOS') {console.log('IOS');window.location.href = `baidumap://map/place/search?query=搜索关键词&location=中心点经纬度&radius=检索半径&src=ios.baidu.openAPIdemo"`}if (this.OS === 'Android') {console.log('Android');window.location.href = `bdapp://map/place/search?query=搜索关键词&location=中心点经纬度&radius=检索半径&src=andr.baidu.openAPIdemo`}},
3. 高德地图

官方文档

  1. 简介:高德地图手机版第三方调用URI API是为开发者提供的一种在自己应用中调用高德地图app的方法. 开发者只需根据提供的URI API构造一条标准的URI, 将其放在自己的应用程序中, 便可调用高德地图APP来进行POI 标点、公交、驾车查询等功能。
  2. 协议(地图标注):
    安卓:androidamap://viewMap
    ios:iosamap://viewMap
  3. JS调用方法: 直接通过 location.href 调用列如官方所给示例的链接即可
  4. 封装
    toGaoDe() {// 使用地图标注功能if (this.OS === 'IOS') {console.log('IOS');location.href = `iosamap://viewMap?sourceApplication=applicationName&poiname=搜索关键词&lat=纬度&lon=经度&dev=0`}if (this.OS === 'Android') {console.log('Android');location.href = `androidamap://viewMap?sourceApplication=appname&poiname=搜索关键词&lat=纬度&lon=经度&dev=0`}},

http://www.ppmy.cn/news/666663.html

相关文章

腾讯地图,百度地图兴趣点(POI)分类关键词表

1.腾讯地图兴趣点(POI)分类关键词表 腾讯地图POI分类关键词表 序号一级名称二级分类三级分类完整名称1美食美食2中餐厅美食:中餐厅3北京菜美食:中餐厅:北京菜4安徽菜美食:中餐厅:安徽菜5山西菜美食:中餐厅:山西菜6福建菜美食:中餐厅:福建菜7河南菜美食:中餐厅:河南菜8鲁菜美食…

【项目日志】仿去哪网移动端--部分实现细节及问题

目录 1.项目地址2.项目介绍3.部分功能实现细节(推荐结合源码看)3.1 city-alphabet--城市选择页字母表部分3.1.1 实现点击字母跳转到相应列表(兄弟组件传值)3.1.2 实现滑动列表可以对应显示相应字母3.1.3 可以优化的点 3.2 city-se…

【项目志】基于vue2的仿去哪网移动端

仿去哪网移动端 环境搭建和项目架构技术栈功能模块首页城市选择页景点详情 源代码地址 环境搭建和项目架构 vue-cli脚手架搭建 技术栈 vue2 vuex axios 插件:better-scroll、view-awasome-swiper 功能模块 首页 home-Header 头部搜索框HomeHeader----包含一…

Poi读取大数据量Excel文件

前言 最近生产环境有个老项目一直内存报警,不时的还出现内存泄漏,导致需要重启服务器,已经严重影响正常服务了。 分析 1.dump内存文件 liunx使用如下命令: ? 1 ./jmap -dump:formatb,fileheap.hprof pid 2.使用Eclipse M…

移动BI的5大功能介绍为你展现移动端的数据可视化!

吃早餐时,老板查看移动BI上的日报,昨日运营情况便一目了然; 机场候机室里,区域经理手机接收到销售异常预警,从而为快速组织应对争取了时间; 会议间隙,众人商讨制定下一周期计划,手…

【移动端表格组件】uniapp简单实现H5,小程序,APP多端兼容表格功能,复制即用,简单易懂【详细注释版本】

前言: 由于最近需要做移动端的项目 有个pc端的后台系统里面需要移一部分页面过来 而里面就有很多的表格,我就开始惯例网上先找前人栽的树,我好乘凉 然后找了一圈发现,不管是主流的移动端ui库或者网上自己写的帖子,或者…

【Apache POI】Excel操作(四):Excel大数据量的写入

迷茫代表着你身边还有选择,焦虑意味着你手上还有时间。 有目录,不迷路 前言超量数据速率比较原因剖析超级版本大救星 往期回顾 前言 之前在下面这期Excel操作: 【Apache POI】Excel操作(一):Excel本地写入…

【解决】百度地图多个标记点多个信息窗口只显示一个问题(vue-baidu-map)

公司项目用到百度地图&#xff0c;我新手一个&#xff0c;碰到多个标记点多个信息窗口只显示一个问题。百度到的看不懂&#xff0c;后来自己解决了 &#xff0c;贴出我的解决方法 vue vue-baidu-map HTML 代码 <template v-for"(items, index) in markerPoints"…