H5嵌入小程序（web-view）、BMap百度地图组件、导航功能、返回web-view页

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.js
	data: {
			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.name
				let address = options.address
				this.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
			})
		}
	},