要在Vue中通过iframe调用
腾讯地图地图
选点组件，并实现反显地点，可以按照以下步骤进行：
1. 在Vue
组件中添加一个iframe元素，并设置其src属性为
腾讯地图地图
选点组件的URL。同时，给iframe添加一个id，以便在后面的代码中可以通过id获取到iframe元素。
```
<template>
<div>
<iframe id="map-iframe" src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=YOUR_KEY"></iframe>
</div>
</template>
```
2. 在Vue
组件的mounted生命周期钩子中，给iframe添加一个load事件的监听器。当iframe加载完成后，通过postMessage向iframe发送一个消息，告诉它需要反显地点。
```
<script>
export default {
mounted() {
const iframe = document.getElementById("map-iframe");
iframe.addEventListener("load", () => {
const message = {
type: "show",
data: {
latLng: {
lat: 39.916527,
lng: 116.397128
}
}
};
iframe.contentWindow.postMessage(message, "*");
});
window.addEventListener("message", event => {
if (event.origin !== "https://apis.map.qq.com") {
return;
}
if (event.data.type === "location") {
const location = event.data.data;
console.log(location);
}
});
}
};
</script>
```
3. 在iframe中通过window.addEventListener监听父窗口发送的postMessage消息。当收到show类型的消息后，根据消息中的经纬度信息，在地图上
显示一个标记点，并通过Geocoder逆地址解析功能获取反显地址信息。当用户点击标记点时，通过postMessage向父窗口发送一个消息，告诉它选中的地点信息。
```
<script>
window.addEventListener("message", event => {
if (event.origin !== "https://apis.map.qq.com") {
return;
}
if (event.data.type === "show") {
const map = new qq.maps.Map(document.getElementById("map-container"), {
center: new qq.maps.LatLng(event.data.data.latLng.lat, event.data.data.latLng.lng),
zoom: 13
});
const marker = new qq.maps.Marker({
position: new qq.maps.LatLng(event.data.data.latLng.lat, event.data.data.latLng.lng),
map: map
});
const reverseGeocoder = new qq.maps.Geocoder({
complete: result => {
if (result.detail.addressComponents) {
const address = result.detail.addressComponents;
const location = {
city: address.city,
district: address.district,
street: address.street,
latLng: event.data.data.latLng
};
window.parent.postMessage({
type: "location",
data: location
}, "*");
}
}
});
reverseGeocoder.getAddress(new qq.maps.LatLng(event.data.data.latLng.lat, event.data.data.latLng.lng));
qq.maps.event.addListener(marker, "click", event => {
const location = {
city: marker.city,
district: marker.district,
street: marker.street,
latLng: event.latLng
};
window.parent.postMessage({
type: "location",
data: location
}, "*");
});
}
});
</script>
```
4. 在Vue
组件的代码中，监听窗口的message事件，并根据接收到的消息类型进行处理。当收到location类型的消息时，获取选中的地点信息，并进行后续处理。
```
<script>
export default {
mounted() {
const iframe = document.getElementById("map-iframe");
iframe.addEventListener("load", () => {
const message = {
type: "show",
data: {
latLng: {
lat: 39.916527,
lng: 116.397128
}
}
};
iframe.contentWindow.postMessage(message, "*");
});
window.addEventListener("message", event => {
if (event.origin !== "https://apis.map.qq.com") {
return;
}
if (event.data.type === "location") {
const location = event.data.data;
console.log(location);
}
});
}
};
</script>
```
通过以上步骤，就可以在Vue中通过iframe调用
腾讯地图地图
选点组件，并实现反显地点的功能了。
本文介绍了一次使用腾讯地图H5选点组件时遇到的问题：地图组件内容错乱。经过排查发现这一现象是由浏览器缩放导致的，并分享了解决思路。
扫一扫
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
