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

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

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

    RunningPlatform() {
      let ua = navigator.userAgent.toLowerCase()
      console.log('内核', ua);
      // ios
      if(ua.indexOf('like mac os x') > -1) {
        this.OS = 'IOS'
      }
      // android
      if(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/uriMobileRoute
      if (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=uri
      if (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`
      }
    },