每日归档： 2020年12月25日

项目需求使用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
	});
},