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

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

效果：

选点

完整代码

实现步骤

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

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

拿到这个iframe

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

  const mapApiKey = "UU2BZ-B6RKG-QCTQW-IA6XO-5NHSH-Q6BYM";
  const IFRAME_HTML = ``;

步骤二：在用户点击时调用方法，该方法内调出腾讯的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 );
  }

完成拉！！！！