百度地图在vue中的使用

1. 可以使用vue-baidu-map这个插件，专门针对vue的百度地图插件
   官网地址
   百度地图实例demo
2. 在vue项目中使用
   在main.js 中

import Vue from 'vue'
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
7

在vue文件中

<template>
    <baidu-map
      :min-zoom="11"
      @ready="handler"
      @zoomend="handleZoom"
      class="map"
      :center="'北京'"
      :zoom="zoom"
      scroll-wheel-zoom
    >
    </baidu-map>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

3. 在style中给map设置高度，否则地图不会显示

<style lang="less" scoped>
.map {
  width: 100%;
  height: 300px;
}
</style>
1
2
3
4
5
6

说明

baidu-map的常用属性

• min-zoom：最小层级
• center：地图的中心定位 可以是文字 也可以是对象，如{lng: 116.404, lat: 39.915}
• zoom: 缩放的等级
• scroll-wheel-zoom：是否允许鼠标滚轮缩放 默认是false

事件

• ready：地图加载开始执行的函数 他有两个参数一个是BMap一个是map 如果想在组件中使用他们，可以通过赋值

handler ({ BMap, map }) {
  this.map = map
  this.BMap = BMap
}
1
2
3
4

• zoomend：地图更改缩放级别结束时触发触发此事件

handleZoom (v) {
  this.zoom = v.target.getZoom() // 可以通过这个方法获取到当前地图的层级
}
1
2
3

百度地图常用的用过的方法记录

• 设置地图的中心点以及缩放层级 第一个参数可以是文字也是是坐标

this.map.centerAndZoom('北京', 11) 
1

• 仅仅只设置地图的中心点 要注意地图的中心点不能仅仅是一个有lng和lat的对象要通过BMap.Point 生成的坐标才有效，以上centerAndZoom方法也是这样

this.map.setCenter(
  new this.BMap.Point(111, 222)
)
1
2
3

其余可查看地图文档

vue-baidu-map常用的组件记录：

海量点组件

<!-- 海量图 所有的定位 -->
<bm-point-collection
    @click="handlePointCollection"
    :points="allMarkers"
    shape="BMAP_POINT_SHAPE_STAR"
    size="BMAP_POINT_SIZE_HUGE"
    color="red"
/>
1
2
3
4
5
6
7
8

label组件

<bm-label
    :label-style="labelStyle"
    @click="clickLabel(marker)"
    :content="marker | filtersContent(zoom)"
    :position="{ lng: marker.longitude, lat: marker.latitude }"
    :offset="{ width: -40, height: 8 }"
/>
1
2
3
4
5
6
7

data () {
  return {
    labelStyle: {
       opacity: 0.9,
       border: 'none',
       color: 'white',
       'background-color': 'transparent',
       'font-size': '16px',
       'text-align': 'center'
     }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

其余组件看vue-baidu-map 官网
做过的项目例子：
效果： 模仿58实现点击label放大层级 显示大层级下的小层级效果
全部代码：

<template>
  <div>
    <!-- 百度地图 -->
    <baidu-map
      :v-loading="loading"
      :min-zoom="11"
      @ready="handler"
      @zoomend="handleZoom"
      class="map"
      :center="'北京'"
      :zoom="zoom"
      scroll-wheel-zoom
    >
      <!-- 大区域 and 小区域 -->
      <div v-show="zoom >= 11 && zoom <= 16">
        <div v-for="marker in markers" :key="marker.longitude + Math.random()">
          <bm-label
            :label-style="labelStyle"
            @click="clickLabel(marker)"
            :content="marker | filtersContent(zoom)"
            :position="{ lng: marker.longitude, lat: marker.latitude }"
            :offset="{ width: -40, height: 8 }"
          />
        </div>
      </div>

      <!-- 海量图 所有的定位 -->
      <bm-point-collection
        v-if="zoom >= 17"
        @click="handlePointCollection"
        :points="allMarkers"
        shape="BMAP_POINT_SHAPE_STAR"
        size="BMAP_POINT_SIZE_HUGE"
        color="red"
      />
    </baidu-map>
  </div>
</template>

<script>

export default {
  data () {
    return {
      labelStyle: {
        opacity: 0.9,
        border: 'none',
        color: 'white',
        'background-color': 'transparent',
        'font-size': '16px',
        'text-align': 'center'
      },
      active: false,
      markers: [],
      bigMarkers: [], // 大区域的数据
      smallMarkers: [], // 小区域的数据
      allMarkers: [], // 所有店铺区域的精细数据
      zoom: 14,
      map: {},
      BMap: {}
    }
  },
  
  filters: {
    filtersContent (marker, zoom) {
      let str = ''
      if (zoom >= 11 && zoom <= 13) {
        str = `<div class="BMapLabel_big"><div style="margin: 0 0 10px">${marker.area_name}</div>${marker.total}套</div>`
      } else if (zoom >= 14 && zoom <= 16) {
        str = `<div class="BMapLabel_small">${marker.area_name}</div>`
      }
      return str
    }
  },
  
  watch: {
    zoom: {
      handler (value) {
        if (value >= 11 && value <= 13) {
          this.markers = this.bigMarkers
        } else if (value >= 14 && value <= 16) {
          this.markers = this.smallMarkers
        }
      },
      immediate: true
    }
  },

  methods: {
   
    /**
     * 关于地图的所有方法
     */
    handler ({ BMap, map }) {
      this.map = map
      this.BMap = BMap
      const city = this.$options.filters.city_name(this.current_store.city_id)
      map.centerAndZoom(city, 11) // 根据城市名设置中心位置
      this.getPointCollectionData(11) // 大区域
      this.getPointCollectionData(14) // 小区域
      this.getPointCollectionData(17) // 所有
    },
    handleZoom (v) {
      this.zoom = v.target.getZoom()
    },
    async getPointCollectionData (value) {
      const params = {
        big_class_value: this.params.big_class_value,
        small_class_value: this.params.small_class_value,
        acreage_value: this.params.acreage_value,
        city_id: this.current_store.city_id,
        stage_status: 3,
        mapBigArea: value === 11 ? 1 : undefined, // 大区域统计
        mapSmallArea: value === 14 ? 1 : undefined, // 小区域统计
        mapAll: value === 17 ? 1 : undefined, // 所有的地图定位
        big_area_value: value === 17 ? undefined : this.params.big_area_value,
        small_area_value: value === 17 ? undefined : this.params.small_area_value
      }
      await getTransferStore(params).then(res => {
        if (value === 11) {
          this.markers = this.bigMarkers = res.data.total
          if (this.markers.length === 1 && !this.params.small_area_value) {
            this.map.setCenter(
              new this.BMap.Point(this.markers[0].longitude, this.markers[0].latitude)
            )
          }
        } else if (value === 14) {
          this.smallMarkers = res.data.total
          if (this.params.small_area_value) {
            const arr = this.bigMarkers.filter(item => item.id === this.params.big_area_value)
            if (!arr[0]) return
            this.clickLabel(arr[0])
          }
        } else if (value === 17) {
          this.allMarkers = []
          res.data.datas && res.data.datas.map(item => {
            this.allMarkers.push({
              lng: item.longitude,
              lat: item.latitude,
              area_name: item.area_name,
              id: item.id
            })
          })
        }
      })
    },
    // 点击label放大层级 并根据父级区域设置中心点
    clickLabel (marker) {
      if (this.zoom >= 11 && this.zoom <= 13) {
        this.zoom = 14
        this.formValidate.store_address.big_area_value = marker.id
        this.params.big_area_value = marker.id
        this.page = 1
        this.show()
      } else if (this.zoom >= 14 && this.zoom <= 16) {
        this.zoom = 17
        this.formValidate.store_address.small_area_value = marker.id
        this.params.small_area_value = marker.id
        this.page = 1
        this.show()
      }
      if (this.zoom >= 14 && this.zoom <= 16) {
        const arr = this.smallMarkers.filter(item => item.p_area_name === marker.area_name)
        if (arr.length === 0) return
        this.map.setCenter(new this.BMap.Point(arr[0].longitude, arr[0].latitude))
      } else if (this.zoom >= 17) {
        const arr = this.allMarkers.filter(item => item.area_name === marker.area_name)
        if (arr.length === 0) return
        this.map.setCenter(new this.BMap.Point(arr[0].lng, arr[0].lat))
      }
    },
    async handlePointCollection ({ currentTarget, point }) {
      const arr = this.allMarkers.filter(item => Number(item.lat) === point.lat && Number(item.lng) === point.lng)
      if (arr.length === 0) return
      const res = await getTransferStore({ id: arr[0].id, sign_detail: 1 })
      this.dataList = res.data.datas.data
      this.total = res.data.datas.total
    }
  }
}
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 300px;
}
</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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188