公众号根据经纬度打开地图导航

点击导航按钮显示选择地图，选中地图后打开地图

效果

 

 

.wxml页面

<div class="navigationk" @click="goMap(item)">
            <img src="/static/navigation.png" alt="" /><span class="green"
              >导航</span
            >
          </div>

.js

goMap(data) {
      let that = this;
      if (!this.mapFlag) {
        this.getLocation();
      }
      let url = window.location.href.split("#")[0];
      let token = localStorage.getItem("accessToken");
       // 后台返回$wx.config需要的参数
      Api.weChatValidate(url, token).then((res) => {
        if (res.data.code == 20000) {
          let info = res.data.data.info;
          localStorage.setItem("accessToken", info.access_token);
          this.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: info.appid, // 必填，公众号的唯一标识
            timestamp: String(info.timestamp), // 必填，生成签名的时间戳
            nonceStr: String(info.nonceStr), // 必填，生成签名的随机串
            signature: info.signature, // 必填，签名，见附录1
            jsApiList: ["checkJsApi", "getLocation", "openLocation"],
          });
          this.$wx.checkJsApi({
            jsApiList: ["getLocation"],
            success: function (res) {
              if (res.checkResult.getLocation == false) {
                that.$toast(
                  "你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！"
                );
                return;
              }
            },
            fail: function (res) {
              console.log("checkJsApi fail=" + JSON.stringify(res));
            },
          });
          this.$wx.ready(function () {
            that.$wx.openLocation({
              latitude: data.lat, // 纬度，浮点数，范围为90 ~ -90
              longitude: data.lng, // 经度，浮点数，范围为180 ~ -180。
              name: data.name, // 位置名
              address: data.address, // 地址详情说明
              scale: 20, // 地图缩放级别,整形值,范围从1~28。默认为最大
              infoUrl: "", // 点位链接
            });
          });
          this.$wx.error((res) => {
            console.log("wx.error", res);
          });
        }
      });
    },

java 获取$wx.config需要的参数

/**
     * 获取jssdk签名
     * @param request
     * @return
     */
    @SneakyThrows
    @GetMapping("jssdkConf")
    public R jssdkConf(@RequestParam("url") String url,@RequestParam("token") String accessToken, HttpServletRequest request){
        Map<String, String> map =  new HashMap<>();
        String access_token = accessToken;
        String tokenStr = "";
        //获取jsapi
        String jsapiStr  = HttpRequestUtil.sendGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket","access_token="+access_token+"&type=jsapi");
        JSONObject jsapi = JSON.parseObject(jsapiStr);
        String jsapi_ticket = jsapi.getString("ticket");
        if (jsapi_ticket == null) {
            tokenStr  = HttpRequestUtil.sendGet("https://api.weixin.qq.com/cgi-bin/token","grant_type=client_credential&appid="+weChatProperties.getAppid()+"&secret="+weChatProperties.getSecret());
            JSONObject token = JSON.parseObject(tokenStr);
            access_token = token.getString("access_token");
            //获取jsapi
            jsapiStr  = HttpRequestUtil.sendGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket","access_token="+access_token+"&type=jsapi");
            jsapi = JSON.parseObject(jsapiStr);
            jsapi_ticket = jsapi.getString("ticket");
        }
        /*****************获取签名signature********************/
        //生成随机字符串  noncestr
        String nonceStr = UUID.randomUUID().toString();
        //时间戳 timestamp，精确到秒
        String timestamp = Long.toString(System.currentTimeMillis() / 1000);
        //url
        //String Url = url;
        String Stitching = "jsapi_ticket="+jsapi_ticket+"&noncestr="+nonceStr+"&timestamp="+timestamp+"&url="+url;
        System.out.println("Stitching："+Stitching);
        //SHA1 加密
        MessageDigest digest = MessageDigest.getInstance("SHA-1");
        digest.update(Stitching.getBytes());
        byte messageDigest[] = digest.digest();
        StringBuffer hexStr = new StringBuffer();
        // 字节数组转换为 十六进制 数
        for (int i = 0; i < messageDigest.length; i++) {
            String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
            if (shaHex.length() < 2) {
                hexStr.append(0);
            }
            hexStr.append(shaHex);
        }
        map.put("tokenStr",tokenStr);
        map.put("access_token",access_token);
        map.put("jsapiStr", jsapiStr);
        map.put("jsapi_ticket", jsapi_ticket);
        map.put("appid", weChatProperties.getAppid());
        map.put("timestamp", timestamp);
        map.put("nonceStr", nonceStr);
        map.put("signature", hexStr.toString());

        return R.ok().data("info", map);

    }