Question

由于我已经制作了一个initMap方法和一个askGeolocation方法，因此我试图使用一种方法来获取地图的范围。

我无法使边界生效，因此地图的缩放比例会适应不同标记的位置。

我试图使方法useBounds在addMarker中调用，但是它不起作用。我还试图将用于处理边界的代码直接放入addMarker（）中，但仍然无法正常工作。

我认为我没有正确地将标记的LatLng放入bounds方法中。

<template>
  <div class="main" ref="autreRef">
    <div class="google-map" v-bind:id="mapName" ref="mainMap" @click="openComponent">
    </div>
  </div>
</template>

<script>
  const GoogleMapsLoader = require('google-maps');
  GoogleMapsLoader.KEY = 'API_KEY';

  export default {
    name: 'google-map',
    props: ['name'],
    data: function() {
      return {
        mapName: this.name + "-map",
        userCoord: {},
        markers: [],
        map: null,
        bounds: null,
        infoWindow: null,
        position: {
          lat: null,
          lng: null
        }
      }
    },

    mounted: function() {
      GoogleMapsLoader.load((google) => {
        this.$store.watch(
          (state, getters) => getters.getRestaurantInfo,
          (newValue, oldValue) => {
            newValue.map((restaurant) => {
              this.addMarker({
                lat: restaurant.lat,
                lng: restaurant.long
              }, 'restaurant')
            })
          }
        )

        this.initMap();
        this.askGeolocation();
//        this.useBounds();


      });
    },
    methods: {
      initMap() {
        const element = this.$refs.mainMap
        const options = {
          center: {lat: 48.842129, lng: 2.329375},
          zoom: 18,
        }
        this.map = new google.maps.Map(element, options);
        this.infoWindow = new google.maps.InfoWindow;
      },
      askGeolocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition((position) => {
            const pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            this.userCoord = pos
            this.addMarker(this.userCoord, 'user')
            this.map.setCenter(pos);
          }, function() {
            handleLocationError(true, this.infoWindow, this.map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, this.infoWindow, this.map.getCenter());
        }
      },

//      useBounds() {
//        this.bounds = new google.maps.LatLngBounds();
//        this.bounds.extend(marker.position);
//        this.map.fitBounds(this.bounds);
//      },

      addMarker(coord, type) {
        let icon = ''
        if (type === 'user') {
          icon = 'https://img.icons8.com/color/48/000000/marker.png'
        } else {
          icon = 'https://img.icons8.com/ios/50/000000/restaurant-table.png'
        }
        console.log('j ajoute ', coord)
        const position = new google.maps.LatLng(coord.lat, coord.lng);
        const marker = new google.maps.Marker({
          position,
          map: this.map,
          icon
        });
//        this.useBounds();
        this.bounds = new google.maps.LatLngBounds();
        this.bounds.extend(marker.position);
        this.map.fitBounds(this.bounds);
        this.markers.push(marker);
      },
      removeMarker(marker) {
        marker.setMap(null)
      },
      openComponent() {
        this.$router.push('/add-restaurant/');
      }
    },
    computed: {
    }
  };
</script>

我希望边界能够正常工作，并设法以与其余代码相同的方式来实现它们，而不是通过在其他地方调用的方法来实现。感谢您的帮助。

Answer 1

警告：这是黑客。 代替：

this.map.fitBounds(this.bounds);

尝试执行以下操作：

this.$nextTick(() => {
  this.map.fitBounds(this.bounds);
});

使用Vuejs从GoogleMaps实现fitBounds

1 个答案: