uniapp项目使用腾讯地图选点组件---iframe方法

1.目的

在一些项目中，我们需要提交用户的位置信息，这可能需要用到一些地图链接，当然我们可以选择的地图有很多，百度，腾旭，高德等等，这些第三方都是有对外接口的。这次介绍一些使用腾讯地图选点组件的使用，来获取定位的经纬度等信息。

2.准备

1.首先要获取腾讯地图的一个key，让我们可以使用它，这是与其连接的关键。

2.地图组件 | 腾讯位置服务 网址展示

3.代码实例

<div v-if="isMapShow" id="position" style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 11111111">
			<iframe
				id="mapPage"
				width="100%"
				height="100%"
				frameborder="0"
				src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&referer=myapp"
			></iframe>
		</div>

首先将以上代码放在你使用页面的跟组件下。然后定义isMapShow变量用过v-if控制它的显示隐藏

<u-form-item required prop="addressShow" labelPosition="top" leftIcon="" labelWidth="300rpx" label="位置信息" @click="showChooseAddress">
					<u-button v-if="latitude == '' && longitude == '' && type != 'detail'" type="default" text="点击获取位置"></u-button>
					<div v-if="latitude != '' && longitude != '' && addressName != ''" style="width: 100%; display: flex; flex-direction: column; align-items: center">
						<u-button v-if="type != 'detail'" type="default" text="点击获取位置" @click="showChooseAddress"></u-button>
						<span :style="type == 'detail' ? 'padding: 15rpx' : 'padding:0'">位置信息:{{ addressName }}</span>
					</div>
				</u-form-item>

代码展示的是把一个点击事件绑在了u-form-item上，当我们点击表单项时，就会打开上面定义的地图iframe，然后就可以选择我们的地点。当我们选完地点时，我们在设置isMapShow为false关闭这个区域。

好，地点都选完了，我们怎么拿到这些信息呢，这需要我们监听一个message事件。在onLoad钩子函数里，定义，代码如下：

window.addEventListener(
			'message',
			(e) => {
				console.log(e);
				if (e.data.module == 'locationPicker') {
					const { latlng, poiaddress, cityname } = e.data;
					if (cityname == poiaddress) {
						uni.showToast({
							title: '请选择详细信息',
							duration: 1000,
							icon: 'error'
						});
					} else if (poiaddress == '') {
						uni.showToast({
							title: '请选择带有汉字描述的地址',
							duration: 1000,
							icon: 'error'
						});
					} else {
						this.latitude = latlng.lat;
						this.longitude = latlng.lng;
						this.addressName = poiaddress;
						this.isMapShow = false;
					}
				}
			},
			false
		);

这样，我们将拿到了信息，并把经纬度以及位置名称给到了data中定义的latitude，longitude变量，最后接口提交它们就可以了。

总结：这个选点的组件对比另一种方式有一个优点，就是它不需要跳转到第三方页面，我们填写其他表单项完时，在选择地址信息，不用但是其他表单信息因为跳转到外链接而丢失信息，因为我们一直就没有离开这个页面。