vue 腾讯地图地图选点组件iframe调用 反显地点

要在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调用腾讯地图地图选点组件，并实现反显地点的功能了。