如何用vue3-google-map解决异步问题？

Question

我们正在使用Vue库来管理Maps vue3-google-map，我试图定义一些多边形，当选择标记区域的中心时，它不允许我选择它：

这是我的地图模板：

 <template>
  <GoogleMap
    ref="mapRef"
    class="mimapa"
    :api-key="apiKey"
    :center="center"
    :zoom="16"
    :zoomControl="controls"
    :fullscreenControl="controls"
    :streetViewControl="controls"
  >
    <q-icon class="pin" :name="pin.icon" :size="pin.size" :color="pin.color" />
    <q-btn
      class="full-width btnMio"
      color="secondary"
      :label="btnLabel"
      @click="getLocation()"
      :disable="btnPosition"
      v-close-popup
    />
       <Polygon v-for="(zone, Index) in DeliveryZones" :key="Index" :options="zone"/>
  </GoogleMap>
  <div class="text-subtitle1 text-center">
    Ubica tu posición exacta en el mapa.
  </div>
</template>

这是我地图上的Javascript代码

<script>
import { computed, defineComponent, ref, inject, onUpdated } from "vue";
import { GoogleMap, Polygon } from "vue3-google-map";
import { useGeolocation } from "../boot/useGeolocation";
import axios from 'axios'
var pointInPolygon = require('point-in-polygon');
export default defineComponent({
  name: "Map",
  components: { GoogleMap, Polygon },
  setup() {
    onUpdated(() => {
    // window.setTimeout(() => {
         setGeocerca() <------ HERE PROBLEM 
    // }, 3000); 
    })
    const mapPoint = inject('mapPoint')
    const { coords } = useGeolocation();
    const center = computed(() => ({
      lat: coords.value.latitude,
      lng: coords.value.longitude,
    }));
    const pin = ref(
      {
        color: 'secondary',
        icon: 'person_pin_circle',
        size: 'xl'
      }
    );
    const apiKey = ref('MY_API_KEY')
    const mapRef = ref();
    const controls = ref(false);
    const btnPosition = ref();
    const btnLabel = ref('Estoy Aquí...');
    const DeliveryZones =
    [
      {
        name: 'Zona1',
        strokeColor: "#00ff7a",
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: "#00ff7a",
        fillOpacity: 0.05,
        price: 2,
        paths: [
        {lat: 10.3816643, lng:-66.9812285 },
        {lat: 10.3549424, lng:-66.9818722 },
        {lat: 10.3549002, lng:-66.9317471},
        {lat: 10.382213, lng:-66.9317471 },
        {lat: 10.3816643, lng:-66.9812285 },
        ]
      },
      {
        name: 'Zona2',
        strokeColor: "#ff0000",
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: "#ff0000",
        fillOpacity: 0.05,
        price: 3,
        paths: [
          {lat: 10.38, lng:-66.98 },
          {lat: 10.35, lng:-66.99 },
          {lat: 10.36, lng:-66.93},
          {lat: 10.37, lng:-66.95},
          {lat: 10.38, lng:-66.98 },
        ]
      }

    ]
    let centerCurrent = null;
    let tarifa = null;
    function setPoligonToArray(poligon){
       let arreglo = []
       let arr=[]
       for (let cords of poligon){
         arr = [cords.lat, cords.lng]
         arreglo.push(arr)
       }
       return arreglo
    }
    let prueba = 0
    function setGeocerca() {

      if(mapRef.value.ready) {
       mapRef.value.map.addListener("center_changed",() => {
       let activo = 0
       for (const zone of DeliveryZones) {
        const selectedPoint = [mapRef.value.map.getCenter().lat(), mapRef.value.map.getCenter().lng()]
       if(pointInPolygon(selectedPoint, setPoligonToArray(zone.paths)) === true)
         {
           activo++
         }
       }
       if(activo > 0) {
        btnPosition.value = false
        btnLabel.value = "Estoy Aquí..."
        pin.value = {
          color: 'secondary',
          icon: 'person_pin_circle',
          size: 'xl'
          }
       }else {
        btnPosition.value = true
        btnLabel.value = "Delivery no disponible para esta zona"
        pin.value = {
          color: 'primary',
          icon: 'location_off',
          size: 'xl'
          }
       }
      });
     }else{
       console.log('Afuera' + prueba)
     }
    }
    function getLocation() {
      if (mapRef.value.ready) {

        // mapPoint.value = mapRef.value.map.getCenter();

       const selectedPoint = [mapRef.value.map.getCenter().lat(), mapRef.value.map.getCenter().lng()]
       for (const zone of DeliveryZones) {
         if(pointInPolygon(selectedPoint, setPoligonToArray(zone.paths)) === true)
         {
           tarifa = zone.price;
           console.log(tarifa)
         }
          console.log(zone.name + ' = '+ pointInPolygon(selectedPoint, setPoligonToArray(zone.paths))); // true
       }
      const mapQuery = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+selectedPoint+"&key=" + apiKey.value
      console.log(mapQuery)
      axios.get(mapQuery).then((result) => {
        mapPoint.value = result.data.results[3].formatted_address;
      })
      }
    }
    
    return { center, getLocation, mapRef, controls, mapPoint, DeliveryZones, btnPosition, btnLabel, pin, apiKey};
  },
});
</script>

onUpdated(() => { // window.setTimeout(() ) => { setGeocerca() <-这里的问题是，这个函数不等待映射加载，并给出映射引用对象不存在的错误，当然，如果我激活超时IT工作，但是如果MAPREF组件的加载时间大于3000，则错误会返回。// }，3000)；}

Answer 1

如果您检查文档的高级用法，它们会显示您可以查看“就绪”，允许您等到地图准备好执行任何任务：https://www.npmjs.com/package/vue3-google-map#user-content-advanced-usage。

考虑到这一点，你应该能够做到：

watch(() => mapRef.value?.ready, setGeocerca);