用Vuejs实现GoogleMaps的fitBounds

要使用Vue.js实现Google Maps的fitBounds功能，需要按照以下步骤操作：

1. 首先，确保在Vue项目中安装了Google Maps JavaScript API。可以通过在index.html文件的头部引入以下代码来安装API：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

请将YOUR_API_KEY替换为您自己的Google Maps API密钥。

2. 在Vue组件中，使用Vue的生命周期钩子函数created()来初始化Google Maps。在此函数中，创建一个新的Map实例，并将其存储在组件的data属性中。

export default {
  data() {
    return {
      map: null
    };
  },
  created() {
    this.map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 40.7128, lng: -74.006 },
      zoom: 12
    });
  }
};

3. 在Vue组件中，创建一个名为fitBounds的方法，用于设置地图的边界。

export default {
  methods: {
    fitBounds() {
      const bounds = new google.maps.LatLngBounds();
      // 添加地图上的所有标记点到边界中
      // 例如：bounds.extend(marker.getPosition());
      // 添加其他需要包含在边界内的地图元素
      // 例如：bounds.extend(otherMapElement.getPosition());
      // 设置地图的边界
      this.map.fitBounds(bounds);
    }
  }
};

4. 在Vue组件的模板中，创建一个按钮或其他触发fitBounds方法的元素。

<template>
  <div>
    <div id="map"></div>
    <button @click="fitBounds">Fit Bounds</button>
  </div>
</template>

5. 最后，在Vue组件的样式中设置地图容器的高度和宽度。

<style scoped>
#map {
  height: 400px;
  width: 100%;
}
</style>

注意：上述代码只是一个简单的示例，fitBounds方法中需要根据实际情况添加地图标记点或其他需要包含在边界内的地图元素。