技术点：使用vue和element实现地图选点功能

使用vue+element+腾讯地图组件实现地图选点功能

效果：

选点

完整代码

<template>
  <div id="app">
    <el-button @click="openMapPickPop">选点</el-button>
    <div>
      <b>经度：</b>
      <b>{{ currentPicked?.latlng.lat }}</b>
    </div>
    <div>
      <b>纬度：</b>
      <b>{{ currentPicked?.latlng.lng }}</b>
    </div>
    <div>
      <b>城市：</b>
      <b>{{ currentPicked?.cityname }}</b>
    </div>
    <div>
      <b>位置信息：</b>
      <b>{{ currentPicked?.poiaddress }}{{ currentPicked?.poiname }}</b>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, watch, onMounted } from "vue";
  import { ElMessageBox } from "element-plus";

  const mapApiKey = "UU2BZ-B6RKG-QCTQW-IA6XO-5NHSH-Q6BYM";
  const IFRAME_HTML = `<iframe id="mapPage" width="600" height="400" frameborder="0"
              src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${mapApiKey}&referer=myapp"></iframe>`;

  const currentPicked = ref({
    latlng: {},
  });

  function openMapPickPop($event) {
    if ($event.relatedTarget) return;
    ElMessageBox({
      title: "选择地址",
      message: IFRAME_HTML,
      customClass: "location-picker-box",
      dangerouslyUseHTMLString: true,
      closeOnPressEscape: false,
    })
      .then(() => {
        window.removeEventListener("message", handleMapPickedMessage, false);

        console.log("选择了地图", currentPicked.value);
      })
      .catch(e => {
        if (e != "cancel") throw e;
        window.removeEventListener("message", handleMapPickedMessage, false);
      });

    window.addEventListener("message", handleMapPickedMessage, false);
  }
  function handleMapPickedMessage(event) {
    /**
     * 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
     */
    let loc = event.data;
    // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
    if (loc && loc.module != "locationPicker") return;
    currentPicked.value = loc;
    // console.log(" currentPicked.value ", currentPicked.value );
  }
</script>

<style>
  html .location-picker-box {
    width: auto;
    max-width: none;
  }
</style>

实现步骤

步骤一：拿到腾讯地图组件的iframe

去腾讯地图申请账号，拿到自己的key，否则无法调用腾讯地图的组件
腾讯地图组件示例地址

拿到这个iframe

注意：key需要注册账号·自己去申请，拿到唯一的key之后腾讯才知道是谁调用的这个组件，然后计次

  const mapApiKey = "UU2BZ-B6RKG-QCTQW-IA6XO-5NHSH-Q6BYM";
  const IFRAME_HTML = `<iframe id="mapPage" width="600" height="400" frameborder="0"
              src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${mapApiKey}&referer=myapp"></iframe>`;

步骤二：在用户点击时调用方法，该方法内调出腾讯的iframe

用别的方法也行，此处是使用了el-element的this.$msgBox，如果使用的其他组件库你也可以使用其他的

  function openMapPickPop($event) {
    if ($event.relatedTarget) return;
    ElMessageBox({
      title: "选择地址",
      message: IFRAME_HTML,
      customClass: "location-picker-box",
      dangerouslyUseHTMLString: true,
      closeOnPressEscape: false,
    })
      .then(() => {
        window.removeEventListener("message", handleMapPickedMessage, false);

        console.log("选择了地图", currentPicked.value);
      })
      .catch(e => {
        if (e != "cancel") throw e;
        window.removeEventListener("message", handleMapPickedMessage, false);
      });

    window.addEventListener("message", handleMapPickedMessage, false);
  }

步骤三：用户选点后，通过页面通信将选中的值传给页面内的变量

  function handleMapPickedMessage(event) {
    /**
     * 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
     */
    let loc = event.data;
    // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
    if (loc && loc.module != "locationPicker") return;
    currentPicked.value = loc;
    // console.log(" currentPicked.value ", currentPicked.value );
  }

完成拉！！！！