H5嵌入小程序（web-view）及导航功实现
- 1、H5页面中的地图展示
- 2、H5传递数据到微信小程序，并调用wx.openLocation微信内置地图及导航功能的实现
1、H5页面中的地图展示
- 创建地图容器，添加导航按钮
<template><div><div class="baidumap" id="allmap"></div> //创建地图容器<div class="button_row"><van-button type="info" round @click="getNavi()">导航前往</van-button></div></div>
</template><style lang="scss" scoped>
.button_row {margin-top: 30px;
}
.van-button {width: 300px;
}
.baidumap {width: 100%;height: 500px;margin-top: 45px;
}
</style>
- 页面地图加载
<script>
export default {data() {return {map: null};},mounted() {this.baiduMap();},methods: {baiduMap() {if (window.BMap) this.map = new window.BMap.Map("allmap"); // 创建Map实例this.map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放this.map.addControl(new window.BMap.NavigationControl()); //向地图中添加缩放控件this.map.addControl(new window.BMap.ScaleControl()); //比例尺控件this.map.addControl(new window.BMap.MapTypeControl()); //负责切换地图类型的控件/* 根据 经纬度 定位|标记 */let point = new window.BMap.Point( //实例坐标点Number(this.details.long),Number(this.details.lat));var marker = new window.BMap.Marker(point); //创建标注this.map.addOverlay(marker); // 将标注添加到地图中this.map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别}}
};
</script>
2、H5传递数据到微信小程序，并调用wx.openLocation微信内置地图及导航功能的实现
1.H5页面核心代码
在public/index.html中引入jweixin-1.6.0.js，建议使用高版本；
<meta name="viewport"content="width=device-width, initial-scale=1.0"http-equiv="cache-control"content="no-cache"/>
<script src="./jweixin-1.6.0.js"></script>页面中的点击导航按钮触发事件
getNavi() {var wxApp = false;wx.miniProgram.getEnv(function (res) {if (res.miniprogram) {wxApp = true;} else {wxApp = false;}});if (wxApp) { //小程序环境let {lng ,lat,name,address,} = this.info;//数据自己赋值wx.miniProgram.navigateTo({url: '/pages/navi/navi?lng=' + lng + '&lat=' + lat + '&name=' + name + '&address=' + address,//跳转回小程序页面,并传参success: function () {console.log('成功跳回小程序')},fail: function () {console.log('跳转回小程序页面失败');},});}
}
2.微信小程序接收传参
- 获取H5传递参数的方式为： console.log(options)
- latitude和longitude必须为数字类型，不支持字符串类型，需要parseFloat进行转换；
- 调用wx.openLocation接口API进行微信内置地图调起；
//nai.jsdata: {num:true},/*** 生命周期函数--监听页面加载*/onLoad(options) {//console.log(options)if (options != undefined) {//判断跳转页面;if (options.lat != "" && options.lat != undefined) {//获取H5传递参数let latitude = parseFloat(options.lat)let longitude = parseFloat(options.lng)let name = options.namelet address = options.addressthis.setData({num:false})//执行导航页wx.openLocation({latitude,longitude,name,address,scale: 18})}}},
/*** 生命周期函数--监听页面显示*/onShow() {let a = getCurrentPages()console.log(a,!this.data.num,'onShow');//wx.navigateBack 无效，确认一下小程序中页面栈if(!this.data.num){wx.navigateBack({//解决wx.openLocation调起地图后需要点击两次返回才到web-view页面delta: 1})}},
)