要在
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调用
腾讯地图地图选点组件，并实现反显地点的功能了。
904
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
