Vue 百度地图baidu-map多点显示_vue-baidu-map 点和海量点

Vue 百度地图baidu-map多点显示

安装baidu-map

$ npm install vue-baidu-map --save
1

引入main.js

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})
1
2
3
4
5
6

代码
我这是把它封装成了组件，也可以直接做成一个页面

<template>
  <baidu-map class="map"
             :center="center"
             :zoom="zoom"
             @click="pointSetClick"
             :scroll-wheel-zoom="true"
             @ready="handler">

    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <bm-local-search :keyword="keyword"
                     zoom="12.8"
                     v-bind:auto-viewport="true"></bm-local-search>
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

    <bm-marker v-for="(item,index) in mapObj"
               :key="index"
               :position="item"
               :animation="draggingList[index]?'BMAP_ANIMATION_BOUNCE':''"
               @click="showItem(index)">
      <bm-label :content="item.title"
                :labelStyle="{color: 'red', fontSize : '20px'}"
                :offset="{width: -35, height: 30}" />
    </bm-marker>
    <bm-info-window :position="position"
                    :show="show"
                    @close="infoWindowClose"
                    @open="infoWindowOpen">
      <div>地点： {{position.title}}</div>
    </bm-info-window>
  </baidu-map>
</template>
<script>
export default {
  name: 'pointSetMap',
  props: {
    mapObj: Array,//结构[{ lng: '', lat: '',title:''}]
    showMap: Boolean,
  },
  watch: {
    showMap() {
      this.center = ''
      this.initMaker()
    },
  },
  data() {
    return {
      draggingList: [],
      position: { lng: '', lat: '',title:'' },
      center: { lng: '', lat: '' },
      zoom: 16,
      show: false,
      geoc: {},
      map: {},
    }
  },
  mounted() {},
  methods: {
    showItem(item) {
      this.draggingList = []
      this.draggingList[item] = true
      this.position = this.mapObj[item]
      this.show = true
    },
    infoWindowClose() {
      this.show = false
    },
    infoWindowOpen() {
      this.show = true
    },
    handler({ BMap, map }) {
      var geoc = new BMap.Geocoder()
      this.geoc = geoc
      map = new BMap.Map('dituContent')
      this.map = map
    },
    //初始化，每次定位到第一个点的位置
    initMaker() {
      if (this.mapObj.length) {
        this.draggingList[0] = true
        this.center = this.mapObj[0]
      }
      this.zoom = 16
    },
    pointSetClick(e) {
      this.geoc.getLocation(e.point, function (rs) {
        var addComp = rs.addressComponents
        console.log(rs)
        console.log(
          addComp.province +
            '-' +
            addComp.city +
            '-' +
            addComp.district +
            '-' +
            addComp.street +
            '-' +
            addComp.streetNumber
        )
      })
    },
  },
}
</script>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 768px;
  height: 600px;
}
</style>

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

效果图

扩展
baidu-map组件