调用高德地图并利用微信提供API实现唤起本地引用软件_微信api唤起高德地图

在网页中需要插入地图，并实现点击唤起本地应用的功能。

地图：高德地图 ， 实现：微信提供的js-sdk 参考高德的文档

//高德提供
<div class="map-box" id="container" tabindex="0">
</div>
//button是实现点击跳转
<div id="getLocation_div">
  <button id="getLocation" ></button>
</div>

//初始化地图 ，传入的经纬度两个参数
initMap(){
  let map = new AMap.Map('container', {
    resizeEnable: false,
    center:[this.lon,this.lat],
    zoom:13
  });
  // 实例化点标记
  let marker = new AMap.Marker({
    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
    position: [this.lon,this.lat],
    offset: new AMap.Pixel(-13, -30)
  });
  marker.setMap(map);
},

//完成这些可以实现 查看到页面上的地图

调用微信的api来实现唤起本地的应用

import wx from 'weixin-js-sdk'  //必须

mounted(){
  setTimeout(()=>{
    this.initMap()
  },1000);

//判断安卓还是IOS
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  let that = this;
  let url=''
  if (isAndroid) {
    url=location.href
  }
  if (isIOS) {
    // url=encodeURIComponent(window.location.href.split('#')[0])  //hash后面的部分如果带上ios中config会不对
    url = window.location.href
  }

后台返回的数据 ，返回公众号的唯一和生成签名的时间戳还有签名的随即串
  this.axios.get(`/wechat/getQm?url=${url}`).then((res) => {
    console.log(res);
    wx.config({
      debug: false,// true,// 开启调试模式
      appId: res.result.appId, // 必填，公众号的唯一标识
      timestamp: res.result.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
      signature: res.result.signature,
      // 必填，需要使用的JS接口列表
      jsApiList: ['checkJsApi', 'openLocation', 'getLocation']
    })
  }).catch(() => {
    alert('failed');
  })
  wx.ready(function () {
    document.querySelector('#getLocation').onclick = function () {
      wx.getLocation({
        type: 'gcj02',
        success: function (res) {
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude;// 经度，浮点数，范围为180 ~ -180
          wx.openLocation({
            latitude: that.lat,
            longitude: that.lon,
            scale: 28,
            name:that.ComName,
            address:that.Address,
            infoUrl: 'http://weixin.qq.com'
          });
        },
        cancel: function (res) {
          console.log(res);
        }
      })
    },
  });

 //样式部分

.map-box{
  width: 100%;
  height: 10rem;
  position: absolute !important;
  z-index: 999;
}
#getLocation_div{
  width: 100%;
  height: 10rem;
  position: relative;
  top: 0;
  z-index: 9999;
  #getLocation{
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
  }