vue h5 使用 jssdk 獲取地理位置

  首先要下載  （為什么不能用 weixin-js-sdk，請看圖片/官方解釋）

npm install weixin-jsapi / yarn add weixin-jsapi

 

 然后在你所需要得頁面引入

import wx from "weixin-jsapi";

<template>
  <div>
    <!-- <van-button type="primary" @click="handleGo">路由跳轉</van-button> -->
  </div>
</template>
<script>
import wx from "weixin-jsapi";
import { jssdkApi } from "@/api/show";
import { scanCodeAfterApi } from "@/api/show";
import { Toast } from 'vant';
export default {
  data() {
    return {
      latitude:'',
      longitude:'',
      accuracy:'',
      openId : this.$route.query.openId,
      code : this.$route.query.code,
      type : this.$route.query.type,
    };
  },

  mounted() {
    var url =  window.location.href;
    // console.log(url)
    var openId = this.openId
    var code =this.code
    var type = this.type
    var that = this
    jssdkApi(url).then((res) => {
    var  timestamp = res.data.data.timestamp
    var  appId = res.data.data.appId
    var  nonceStr = res.data.data.nonceStr
    var  signature = res.data.data.signature
      wx.config({
        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
        appId: appId, // 必填，公眾號的唯一標識
        timestamp: timestamp, // 必填，生成簽名的時間戳
        nonceStr: nonceStr, // 必填，生成簽名的隨機串
        signature: signature, // 必填，簽名，見附錄1
        jsApiList: ['getLocation'], // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
      });
      wx.ready(() => {
        wx.getLocation({
          debug: false,
          type: "wgs84", // 默認為wgs84的gps坐標，如果要返回直接給openLocation用的火星坐標，可傳入'gcj02'
          success: function (res) {
            this.latitude = res.latitude; // 緯度，浮點數，范圍為90 ~ -90
            this.longitude = res.longitude; // 經度，浮點數，范圍為180 ~ -180。
            this.accuracy = res.accuracy; // 位置精度
 },
        });
      });

為什么要用that  如果在回調里傳參 用到this了 要改 不能在里面用this

另外 url 要統一  你的環境也要統一，config 有錯誤 就找后端  部署到一定得環境中運行，另外這是微信api要在微信運行