微信h5 导航，微信导航

在开发微信h5中使用了一次微信内置api 但是需要80端口 最后未采用

 <div class="address" @click.stop="weixin()">
    <div class="address-left">{{ item["地址"] }}</div>
    <div
      class="address-right"
      v-if="item['坐标'] != ''"
      @click="
        goto(item['坐标'].lat, item['坐标'].lng, item['地址'])
      "
    >
      <img src="../assets/images/address.png" alt="" />
    </div>
  </div>

 async weixin() {
      let ua = navigator.userAgent;
      // 判断机型
      if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        // IOS系统 JSSDK验证时使用的URL参数
        this.url = window.location.href.split("#")[0];
      } else {
        this.url = window.location.href.split("#")[0];
        // 安卓
      }
      let res = await wx_sign(localStorage.getItem("token"), this.url);
      if (res.data.code != 1) {
        this.$toast.fail("获取地理坐标失败");
      } else {
        // 调用微信sdk配置函数 将后端传参 进行配置
        this.configInfo(res.data.data);
      }
    },
    // 进行微信sdk参数配置
    configInfo(res) {
      this.$wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.appId, // 必填，公众号的唯一标识
        timestamp: res.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.signature, // 必填，签名
        jsApiList: ["apiList", "openLocation"],
        // 必填，需要使用的JS接口列表
      });
      // 处理成功后回调
      this.$wx.ready(function () {
        console.log("处理成功:");
      });
      // 处理失败后回调
      this.$wx.error(function (err) {
        console.log("处理失败:", err);
      });
    },
    // 点击导航按钮  查看位置
    goto(res, rea, address) {
      this.$wx.openLocation({
        latitude: Number(res), // 纬度，浮点数，范围为90 ~ -90
        longitude: Number(rea), // 经度，浮点数，范围为180 ~ -180。
        name: address, // 位置名
        address: address, // 地址详情说明
        scale: 10, // 地图缩放级别,整型值,范围从1~28。默认为最大
        infoUrl: "", // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },

后来直接这样用比调用微信的sdk简单多了（注意 百度、高德的、经纬度不同 需要转换哦！）

 <div class="map-line">
  <a :href="`http://api.map.baidu.com/marker?location=${list.BaiduMap_Y},${list.BaiduMap_X}&title=${list.Name}&content=${list.Address}&output=html`"
      >百度地图</a>
  </div>
  <div>
    <a  :href="`https://uri.amap.com/marker?position=${list.GaodeMap_X},${list.GaodeMap_Y}&name=${list.Name}`"
      >高德地图</a>
  </div>

 <van-popup
      v-model:show="show"
      position="bottom"
      :style="{ height: '7.25rem' }"
      closeable
    >
      <div class="map_pop_cont">
        <div class="map-line">
          <a
            :href="`http://api.map.baidu.com/marker?location=${list.BaiduMap_Y},${list.BaiduMap_X}&title=${list.Name}&content=${list.Address}&output=html`"
            >百度地图</a
          >
        </div>
        <div>
          <a
            :href="`https://uri.amap.com/marker?position=${list.GaodeMap_X},${list.GaodeMap_Y}&name=${list.Name}`"
            >高德地图</a
          >
        </div>
      </div>
    </van-popup>
    
	// 地图弹出层
	const show = ref(false);
	const showPopup = () => {
	  show.value = true;
	};