Développement de composants Vue : méthode d'implémentation de composants cartographiques

<script src="https://api.map.baidu.com/api?v=3.0&ak=your_ak"></script>

<template>
  <div id="map-container"></div>
</template>

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  created() {
    // 初始化地图
    const map = new BMap.Map("map-container");
    const point = new BMap.Point(116.404, 39.915); // 设置地图中心点坐标
    map.centerAndZoom(point, 15); // 设置地图级别
  }
}
</script>

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  props: {
    center: { type: Object, required: true }, // 地图中心点坐标
    zoom: { type: Number, default: 12 } // 地图级别，默认为12
  },
  created() {
    // 初始化地图
    const map = new BMap.Map("map-container");
    const point = new BMap.Point(this.center.longitude, this.center.latitude);
    map.centerAndZoom(point, this.zoom);
  }
}
</script>

<template>
  <div>
    <map-component :center="mapCenter"></map-component>
  </div>
</template>

<script>
import MapComponent from "@/components/MapComponent.vue";

export default {
  components: {
    MapComponent
  },
  data() {
    return {
      mapCenter: { // 地图中心点坐标
        longitude: 116.404,
        latitude: 39.915
      }
    };
  }
}
</script>