vue中使用百度地图创建多点信息窗口_vue-baidu-api的bm-info-window多个标记点对应多个信息弹框的问题

1、安装Vue Baidu Map
npm install vue-baidu-map --save

2、下载码云项目，地址：https://github.com/sy-zy/VueBMapInfoWindow

3、把下载的项目中src/components/infoWinfow文件夹复制到自己的公共组件文件夹components里面

4、vue中使用infoWindow组件

<template>
  <div class="home">
   <infoWindow
     :map="map"
     :markers="markers"
     @on-change="change">
     <h1>{{content}}</h1>
   </infoWindow>
  </div>
</template>

<script>
import infoWindow from '@/components/infoWindow/infoWindow.vue'
export default {
  name: 'home',
  components: {
      infoWindow,	  
  },
  data() {
    return {
      // 地图配置
      map: {
        ak: '百度地图浏览器端AK秘钥',
        center: {
          lng: '112.97935279',
          lat: '28.21347823',
        },
        zoom: 12,
        width: '100%',
        height: '100%',
      },
      // 地图标记点
      markers:[
        {
          lng: '112.685238',
          lat: '28.136284',
          value: '信息窗口1'
        },
        {
          lng: '112.958309',
          lat: '28.214387',
          value: '信息窗口2'
        },

      ],
      content: '',
    };
  },
  methods: {
    // 切换标记点 marker当前标记点对象
  	change (marker) {
      this.content = marker.value;
      console.log(marker.value);
    }
  },
}
</script>
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
45
46
47
48
49
50
51
52
53
54
55
56
57