Javascript 使用Vuejs实现GoogleMaps中的fitBounds

我正在尝试获取映射的边界，而不是使用方法，因为我已经创建了initMap方法和askGeolocation方法

我无法使边界正常工作，因此地图的缩放会适应不同标记的位置

我尝试过让一个方法useBounds在addMarker中调用，但它不起作用。我还尝试将处理边界的代码直接放入addMarker（）中，但仍然不起作用

我认为我没有正确地将标记的板条放入边界方法中

<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>

const GoogleMapsLoader=require（'google-maps'）；
GoogleMapsLoader.KEY='API_KEY'；
导出默认值{
名称：'谷歌地图'，
道具：['name']，
数据：函数（）{
返回{
mapName:this.name+“-map”，
userCoord:{}，
标记：[]，
map:null，
界限：空，
信息窗口：空，
职位：{
lat:null，
液化天然气：零
}
}
},
挂载：函数（）{
GoogleMapsLoader.load（（谷歌）=>{
这是$store.watch(
（state，getters）=>getters.getRestaurantInfo，
（新值、旧值）=>{
newValue.map（（餐厅）=>{
这是addMarker({
拉特：餐厅，拉特，
液化天然气：餐厅。朗
}（“餐厅”）
})
}
)
this.initMap（）；
这个.askGeolocation（）；
//this.useBounds（）；
});
},
方法：{
initMap（）{
常量元素=此。$refs.mainMap
常量选项={
中心：{lat:48.842129，lng:2.329375}，
缩放：18，
}
this.map=new google.maps.map（元素，选项）；
this.infoWindow=new google.maps.infoWindow；
},
askGeolocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（（位置）=>{
常数位置={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
this.userCoord=pos
this.addMarker（this.userCoord，'user'）
此.map.setCenter（pos）；
}，函数（）{
handleLocationError（true，this.infoWindow，this.map.getCenter（））；
});
}否则{
//浏览器不支持地理位置
handleLocationError（false，this.infoWindow，this.map.getCenter（））；
}
},
//useBounds（）{
//this.bounds=new google.maps.LatLngBounds（）；
//this.bounds.extend（marker.position）；
//this.map.fitbunds（this.bounds）；
//      },
addMarker（坐标，类型）{
让图标=“”
如果（类型==‘用户’）{
图标https://img.icons8.com/color/48/000000/marker.png'
}否则{
图标https://img.icons8.com/ios/50/000000/restaurant-table.png'
}
console.log（'j ajute'，coord）
const position=new google.maps.LatLng（coord.lat，coord.lng）；
const marker=new google.maps.marker({
立场,，
map:this.map，
偶像
});
//this.useBounds（）；
this.bounds=new google.maps.LatLngBounds（）；
this.bounds.extend（marker.position）；
this.map.fitbunds（this.bounds）；
这个。标记。推（标记）；
},
移除标记器（标记器）{
marker.setMap（空）
},
openComponent（）{
这是.$router.push（'/add restaurant/'）；
}
},
计算：{
}
};

我希望边界能够正常工作，并能够以与代码其余部分相同的方式实现它们，而不是通过在别处调用的方法。 谢谢你的帮助。

警告：这是一次黑客攻击。 而不是：

this.map.fitBounds(this.bounds);

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

尝试这样做：

this.map.fitBounds(this.bounds);

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

---

尝试使用传单的vue端口。我曾在谷歌地图上使用过，它对我很有用。