在vue中给百度地图添加多个标点_vue-百度地图 多个点

一、创建标点坐标

1、根据经纬度生成标点坐标

const points = ref([
  { lng: 116.405725, lat: 39.935362 },
  { lng: 116.950723, lat: 39.964357 },
  { lng: 115.950723, lat: 39.974357 },
  { lng: 116.950723, lat: 39.984357 },

  // 添加更多的经纬度坐标
]);
1
2
3
4
5
6
7
8

2、将标点渲染到地图上

import { onMounted, onUnmounted, ref, reactive, toRefs } from "vue";

const baiduRef = ref();
const map = ref();
const points = ref([
  { lng: 116.405725, lat: 39.935362 },
  { lng: 116.950723, lat: 39.964357 },
  { lng: 115.950723, lat: 39.974357 },
  { lng: 116.950723, lat: 39.984357 },

  // 添加更多的经纬度坐标
]);
const markers = ref([]);

function initMap() {
  map.value = new BMap.Map(baiduRef.value); // 新建一个map地图实例
  map.value.centerAndZoom(new BMap.Point(points.value[0].lng, points.value[0].lat), 10);
  map.value.enableScrollWheelZoom(true); // 滚轮缩放
  map.value.setMapStyleV2({
    styleId: "1fb853a740649182c004c7f05e3f1ac7", // 样式id，设置样式的自定义
  });

  points.value.forEach((point) => {
    const bPoint = new BMap.Point(point.lng, point.lat); // 创建点
    const marker = new BMap.Marker(bPoint); // 做标记
    map.value.addOverlay(marker); // 在地图上显示标注点
    markers.value.push(marker);

    // 点击标注监听事件
    marker.addEventListener("click", function (e) {
      alert("您点击了标注");
      console.log(e, 888888888);
    });
  });
}

onMounted(() => {
  initMap();
});

onUnmounted(() => {
  map.value = null; // 销毁地图实例
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

3、完成效果