nuxt-gmaps 动态添加边界

Question

正在尝试让地图读取所有应该动态可见的位置。

<script>
  export default {
    name: "GoogleMaps",
    props: {
      locations: {
        type: Array,
        default: () => {
          return [];
        },
      },
      visibleLocations: {
        type: Array,
        default: () => {
          return [];
        },
      },
      center: {
        center: Object,
      },
    },
    data() {
      return {
        userLocation: {},
        locationsVisibleOnMap: "",
      };
    },
    mounted() {
      this.$refs.gMap.$mapCreated.then(() => {
        const B = new window.google.maps.LatLngBounds();
        // locationsVisibleOnMap should be loaded here
        B.extend({
          lat: 33.972,
          lng: 35.4054,
        });

        this.$refs.gMap.fitBounds(B);
      });
    },
  };
</script>
<template>
  <div>
    <GMap
      ref="gMap"
      :center="center"
      :options="{
            fullscreenControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            zoomControl: true,
            gestureHandling: 'cooperative'
          }"
      :zoom="12"
    >
      <GMapMarker
        v-for="location in locations"
        :key="location.id"
        :position="{ lat: location.lat, lng: location.long }"
        @click="currentLocation = location"
      >
        <GMapInfoWindow :options="{ maxWidth: 200 }">
          <b>{{ location.name }}</b>
          <br />
          <br />
          <code>
            Lat: {{ location.lat }},
            <br />
            Lng: {{ location.long }}
          </code>
        </GMapInfoWindow>
      </GMapMarker>
    </GMap>
  </div>
</template>

我不断收到未定义的引用。一定是我做错了什么。

Answer 1

你需要像这样使用nextTick

async mounted() {
  await this.$nextTick();
  this.$refs.gMap.$mapCreated.then(() => {
    const B = new window.google.maps.LatLngBounds();
    // locationsVisibleOnMap should be loaded here
    B.extend({
      lat: 33.972,
      lng: 35.4054,
    });

    this.$refs.gMap.fitBounds(B);
  });
}

或使用回调

mounted() {
  this.$nextTick(() => {
    this.$refs.gMap.$mapCreated.then(() => {
      const B = new window.google.maps.LatLngBounds();
      // locationsVisibleOnMap should be loaded here
      B.extend({
        lat: 33.972,
        lng: 35.4054,
      });

      this.$refs.gMap.fitBounds(B);
    });
  });
}

gMaps 需要一段时间才能加载，因此对于它的任何操作，您应该始终在 nextTick 上进行。
在某些情况下，您可能需要再次等待下一次滴答，然后再调用 fitBounds 以获得正确的边界，或者如果您想稍后为其他事件更改它们。

Answer 2

我最近不得不使用 nuxt-gmaps 来处理这个问题并弄清楚了如何去做，所以添加这个答案以防其他人偶然发现这个问题，首先在你的 template 中有一些东西喜欢

<GMap ref="gMap" @loaded="fitBoundsToMarkers">

在你的方法中

fitBoundsToMarkers(google) {
  const bounds = new google.maps.LatLngBounds(); // creates a bounds object
  this.$refs.gMap.markers.forEach((marker) => bounds.extend(marker.getPosition())); // adds all the markers to the bounds object, you can filter it if you need that
  this.$refs.gMap.map.fitBounds(bounds, { left: 400 }); // fitBounds, you can also add padding, I have a left padding of 400px here
},

这应该允许您使用已经设置的标记来适应负载范围。如果您需要将边界拟合到其他一些点，您可以使用 extend.

将它们添加到边界对象

如果您需要自己从其他函数调用 fitBoundsToMarkers，那么您可以从 this.$refs.gMap.google.

访问 google

nuxt-gmaps 动态添加边界

nuxt-gmaps add bounds dynamically

google-maps

nuxt.js

nuxt-gmaps