vue 微信H5页面打开内置地图的指定位置和获取当前位置（转载收藏）

1. 根据经纬度打开地图

首先，装一下微信sdk：

css 复制代码

npm i weixin-js-sdk -S

页面：按钮点击之后打开地图（demo演示）

xml 复制代码

<template>
  <div class="map box clmcenter">
    <button @click="openMap">打开地图</button>
  </div>
</template>

js部分：

1.导入weixin-js-sdk

2.在openMap方法中获取签名之后调用wx.openLocation打开地图

javascript 复制代码

import { Toast } from "vant";
import wx from "weixin-js-sdk";
export default {
  methods: {
    openMap() {
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      this.$http
        .post("后台地址", { url })
        .then((res) => {
          let data = res.data;
          wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: ["checkJsApi", "openLocation"],
            success(res) {
              //   Toast(res);
            },
          });
        });
      wx.ready(() => {
        wx.checkJsApi({
          jsApiList: ["openLocation"],
          success: (rest) => {
            // Toast("ready*****",rest);
            //打开指定位置
            wx.openLocation({
              latitude: 31.232795315128442, // 纬度，浮点数，范围为90 ~ -90
              longitude: 121.47511024687574, // 经度，浮点数，范围为180 ~ -180。
              name: "人民广场", // 位置名
              address: "", // 地址详情说明
              scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
              infoUrl: "", // 在查看位置界面底部显示的超链接,可点击跳转
            });
          },
        });
      });
    },
  },
};

注意：经纬度的值是浮点数！经纬度的值是浮点数！！经纬度的值是浮点数！！！

只要签名中的配置都能正常拿到，IOS和安卓端都可以正常打开地图，调试的时候也可以把debug改为true，方便查看错误信息。

获取当前位置后打开地图获取当前地址用到的是wx.getLocation这个接口，具体使用在微信开发者文档中也有说明。

注意：

在jsApiList中添加getLocation配置，ready()中对应也要添加。
wx.getLocation的type值改为 'gcj02' 火星坐标值。

javascript 复制代码

openMap() {
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      this.$http
        .post("https://www.mahelei.com/index.php/Gm/Wechat/share", { url })
        .then((res) => {
          let data = res.data;
          wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: ["checkJsApi", "getLocation", "openLocation"],
            success(res) {
              //   Toast(res);
            },
          });
        });
      wx.ready(() => {
        wx.checkJsApi({
          jsApiList: ["getLocation", "openLocation"],
          success: (rest) => {
            // Toast("ready*****",rest);
            //获取当前位置
            wx.getLocation({
              type: "gcj02", // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
              success: function (res) {
                //打开指定位置
                wx.openLocation({
                  latitude: res.latitude, // 纬度，浮点数，范围为90 ~ -90
                  longitude: res.longitude, // 经度，浮点数，范围为180 ~ -180。
                  name: "我的位置", // 位置名
                  address: "", // 地址详情说明
                  scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
                  infoUrl: "", // 在查看位置界面底部显示的超链接,可点击跳转
                });
              },
            });
          },
        });
      });
    },