项目需求使用uniapp 在小程序和h5端使用地图并支持选点
遇到以下问题:
小程序内运行<iframe>会是空的
使用web-view 组件传入腾讯地图的src后也不行
没有办法只能去做适配 零散代码如下:
manifest.json
/* 小程序特有相关 */ "mp-weixin": { "appid": "U appid xxxxxxxxx", "setting": { "urlCheck": false, "es6": true }, "usingComponents": true, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } }, "plugins": { "chooseLocation": { "version": "1.0.5", "provider": "wx76a9a06e5b4e693e" } } },
H5端选点后,获取到选点坐标内容 做相关处理
//url https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=U3MBZ-VGILU-WIPVM-2UEDJ-HOZT6-XAF6G&referer=myapp <uni-popup ref="popup" type="bottom" class="buttom_popup"> <iframe :src=this.url id="mapPage" width="100%" height="500rpx" frameborder=0></iframe> </uni-popup> onLoad: function(e) { //#ifdef H5 window.addEventListener('message', function(event) { var loc = event.data; if (loc && loc.module == 'locationPicker') { that.changeLoc(loc); } }, false); //#endif },
小程序端引入组件,初始化
onShow: function(){ //#ifdef MP-WEIXIN const chooseLocation = requirePlugin('chooseLocation') const location = chooseLocation.getLocation() // 如果点击确认选点按钮,则返回选点结果对象,否则返回null console.log("您所选择的位置:", location) if(location){ //拿到选点后做相关逻辑处理 } //#endif },
//part view <input @click="open" disabled="true" name="coordinates" class="uni-input" placeholder="地图坐标" v-model="formData.coordinates"/> //part function open(){ //#ifdef H5 //如果是h5 通过popup层打开iframe窗口调用地图组件 this.$refs.popup.open() //#endif //#ifdef MP-WEIXIN //如果是小程序 调用function 跳转地图页面选点 选点后会回到本,在onShow里接收选点信息,再做相关逻辑处理 this.getAddress(); //#endif }, getAddress() { const key = 'U3MBZ-VGILU-WIPVM-2UEDJ-HOZT6-XAF6G' //使用在腾讯位置服务申请的key const referer = 'Leo' //调用插件的app的名称 //初始化选点坐标 const location = JSON.stringify({ latitude: xxxxxx, longitude: xxxxxxx }) wx.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location }); },