高德地图H5内嵌小程序遇到的跳转地图问题

vue里使用高德地图h5内嵌小程序跳转,在小程序是打不开的,需要判断在小程序内,调起小程序地图组件

h5中的地图是这样展示的,在微信小程序是无法跳转的
高德地图H5内嵌小程序遇到的跳转地图问题_第1张图片

引入jweixin.js

  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js">script>

vue里判断

<a class="more" @click="onmore">到这去a>
  const onmore = () => {
      let h5Url = window.location.href
      if (window.__wxjs_environment == 'miniprogram') {
        // alert("在小程序")
        wx.miniProgram.navigateTo({ url: '/pages/webview/webview?longitude=' + longitude.value + '&latitude=' + latitude.value + '&latituname=' + mapname.value + '&address='+address.value+'&url='+h5Url+'  ' })

      } else {
        // alert("不在小程序")
        window.location.href = `https://uri.amap.com/marker?position=${jwd1.value}&name=${mapnamedata.value}`;
      }
    }

在小程序这边接收传过来的参数(需要注意的是:高德地图坐标和腾讯坐标是一样的,只需要经纬度反过来即可)

 if(options.latitude != '' && options.latitude != undefined ){
      let longitude = options.latitude;
      let latitude = options.longitude;
      let address = options.address;
      let name = options.latituname
      console.log(options.url)
      longitude = parseFloat(longitude);
      latitude = parseFloat(latitude);
      wx.openLocation({
        longitude: latitude,
        latitude: longitude,
        name:name,
        address: address,
        scale: 15,
      })
    }

最后在小程序中呈现是这样,就完美实现了
高德地图H5内嵌小程序遇到的跳转地图问题_第2张图片

你可能感兴趣的:(小程序,前端,javascript,vue.js)