主要功能:用于展示公共场所等地
主要思路: 在H5页面中点击按钮,跳出web-view,进入小程序的某个页面,在这个页面中使用wx.openLocation加载微信地图等操作
在H5页面中
1、index.html页面引入微信依赖
以便于在H5页面中调用wx等官方api
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、在确定跳转的页面使用官方跳转api
//导航
const guide = () => {
//获取目标地点经纬度,将经纬度拼接成字符串
let lnglat = `${applyData.value.jd}, ${applyData.value.wd}`;
// 调用官方api,跳转至提前在小程序中写好的‘中转页’,拼接参数可参考wx.openLocation可配置参数按
需传进去
wx.miniProgram.navigateTo({
url: `/pages/map/index?lnglat=${lnglat}&address=${applyData.value.xxdz}`,
});
};
因为之前已经在index.thml中引入过微信的js,所以此处可放心调用wx.方法,需要在微信开发者工具中微信环境下方可正常使用, 浏览器会报错
在微信小程序中
1、创建地图中转页,在该页面接受参数并调用wx.openLocation
1、在app.json中添加中转页路由
2、在中转页的js文件中编写跳转代码
方便粘贴,代码如下:
Page({
data: {
isBack: false
},
onLoad(options) {
this.showWxMap(options);
},
onHide() {
this.isBack = true
},
onShow() {
if (this.isBack) {
wx.navigateBack({
delta: 1,
})
this.isBack = false
}
},
showWxMap(options) {
const {
lnglat,
address = '目的地'
} = options;
const [lng, lat] = lnglat.split(',')
wx.openLocation({
latitude: Number(lat),
longitude: Number(lng),
address,
scale: 18,
});
},
});
以上代码已经包括了返回刚才web-view页面的方法,可以正常返回你需要导航之前的页面
结束