Vue3 Baidu Map 设置中心位置并自动移动 - vue-baidu-map-3x

在 Vue3 中，你可以使用'vue-baidu-map-3x' 插件来设置地图的中心位置，并自动移动到中点。

首先，安装'vue-baidu-map-3x' 插件：

npm install vue-baidu-map-3x

然后，在你的 Vue 组件中使用'vue-baidu-map-3x' 插件。在模板中，使用'baidu-map' 标签来显示地图，并设置'center' 属性来指定地图的中心位置。在'mounted' 钩子函数中，使用'this.$refs.mapRef.setCenter' 方法来将地图移动到中点。

<template>
  <div>
    <baidu-map ref="mapRef" :ak="yourBaiduMapAK" :center="center" :zoom="zoom" style="width: 100%; height: 400px;"></baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      yourBaiduMapAK: 'Your Baidu Map AK',
      center: { lng: 116.404, lat: 39.915 }, // 中心位置的经纬度
      zoom: 12 // 缩放级别
    }
  },
  mounted() {
    this.$refs.mapRef.setCenter(new BMap.Point(this.center.lng, this.center.lat));
  }
};
</script>

在上面的例子中，我们将地图的中心位置设置为北京市的经纬度。在'mounted' 钩子函数中，使用'this.$refs.mapRef.setCenter' 方法将地图移动到中点。

注意：在上面的例子中，'yourBaiduMapAK' 是你自己的百度地图 API 密钥。你需要将其替换为你自己的密钥。

这样，你就可以在 Vue3 中设置地图的中心位置并自动移动到中点了。