90设计手机站,中小网站 广告费,深圳出行最新消息,可以自己做网站这么做H5嵌入小程序#xff08;web-view#xff09;及导航功实现 1、H5页面中的地图展示2、H5传递数据到微信小程序#xff0c;并调用wx.openLocation微信内置地图及导航功能的实现 1、H5页面中的地图展示
创建地图容器#xff0c;添加导航按钮
templatedivweb-view及导航功实现 1、H5页面中的地图展示2、H5传递数据到微信小程序并调用wx.openLocation微信内置地图及导航功能的实现 1、H5页面中的地图展示
创建地图容器添加导航按钮
templatedivdiv classbaidumap idallmap/div //创建地图容器div classbutton_rowvan-button typeinfo round clickgetNavi()导航前往/van-button/div/div
/templatestyle langscss 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); // 初始化地图设置中心点坐标和地图级别}}
};
/script2、H5传递数据到微信小程序并调用wx.openLocation微信内置地图及导航功能的实现
1.H5页面核心代码
在public/index.html中引入jweixin-1.6.0.js建议使用高版本
meta nameviewportcontentwidthdevice-width, initial-scale1.0http-equivcache-controlcontentno-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})}},
