根据经纬度打开地图
安装一下微信sdk
npm i weixin-js-sdk -S
页面使用
<template>
<div class="map box clmcenter">
<button @click="openMap">打开地图</button>
</div>
</template>
<script>
import { Toast } from "vant";
//导入weixin-js-sdk
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: "", // 在查看位置界面底部显示的超链接,可点击跳转
});
},
});
});
},
},
};
</script>- 注意：经纬度的值是浮点数！经纬度的值是浮点数！！经纬度的值是浮点数！！！
只要签名中的配置都能正常拿到，IOS和安卓端都可以正常打开地图，调试的时候也可以把debug改为true，方便查看错误信息。
获取当前位置后打开地图
获取当前地址用到的是wx.getLocation这个接口，具体使用在微信开发者文档中也有说明。
- 注意 ：
(1). 在jsApiList中添加getLocation配置，ready()中对应也要添加。
(2). wx.getLocation的type值改为 ‘gcj02’ 火星坐标值。
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: "", // 在查看位置界面底部显示的超链接,可点击跳转
});
},
});
},
});
});
},
