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要在微信运行