vue3.2 setup 腾讯选址组件以及定位当前位置

第一步：要在index.html里插入

第二步
父组件：在父组件实现当前定位功能，然后点击上报来源，弹出子组件选址。
这里用到了 vant的 van-popup 包裹子组件。
用子组件的ref=LocationSon 去获取子组件暴漏的值，要配合watchEffect

      <li class="item" @click="onShowEventSources((showEventSources = true))">
        <div class="text">上报来源</div>
        <div class="info">
          <p :class="EventSourcesText != '请选择' ? 'selected' : ''">
            {{ EventSourcesText }}
          </p>
          <van-icon name="arrow" />
        </div>
      </li>

   <van-popup
    closeable
    close-icon="close"
    v-model:show="showMap"
    position="bottom"
    :style="{ height: '90%' }"
  >
       <Location ref="LocationSon" />
  </van-popup>

<script setup>
import {
  ref,
  onMounted,
  watchEffect,
  nextTick,
} from "vue";
// 定位 S
const LocationSon = ref("");
const showMap = ref(false);
const locationText = ref("");
const onMap = () => {
  showMap.value = true;
};
watchEffect(() => {
  locationText.value = LocationSon.value["locText"] || "点击定位";
});
onMounted(() => {
  nextTick(() => {
    initMap();
  });
});
let initMapIdx = 0;
const initMap = () => {
  if (!window.qq.maps && initMapIdx < 10) {
    setTimeout(() => {
      initMapIdx += 1;
      initMap();
    }, 500);
    return false;
  }
  const geolocation = new window.qq.maps.Geolocation(
    "申请的腾讯地图key", // 申请的腾讯地图key（必填）
    "网格管理系统" // 申请的腾讯地图key名称（非必填，最好填一下）
  );
  // 回调的第一次参数为成功后具体的位置信息
  geolocation.getLocation(
    (postion) => {
      console.log("成功", postion);
      // alert(JSON.stringify(postion))
      // onComplete(postion);
    },
    (err) => {
      console.log("定位失败", err);
    }
  );
};
// 定位 A

第三步：子组件
先编辑到这，有空了在组织语言 先看代码吧

<template>
  <div class="locationWrap">
    <iframe
      id="mapPage"
      width="100%"
      height="100%"
      frameborder="0"
      src="https://apis.map.qq.com/tools/locpicker?key=IBUBZ-NZ7CX-NL44H-Z7K5I-H6KAJ-RYF74&search=1&type=1&referer=myapp"
    >
    </iframe>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, watchEffect, onBeforeUpdate } from "vue";
import NavBar from "@/components/NavBar";
import getSrc from "@/utils/getSrc";
import localStorageEx from "@/utils/localStorageEx";
import { Toast } from "vant";
const locationText = ref("");
const locText = ref("");
onMounted(() => {
  window.addEventListener(
    "message",
    function (event) {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      var loc = event.data;
      if (loc && loc.module == "locationPicker") {
        //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        Toast("选中成功");
        locText.value = `${loc.poiaddress} ${loc.poiname}`;
      }
    },
    false
  );
});
watchEffect(() => {
  locText.value = locText.value;
});
defineExpose({
  locText,
});
</script>

<style lang="scss">
.locationWrap {
  margin-top: 50px;
  height: calc(100vh - 90px);
}
</style>