百度地图在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'
})

在vue文件中

<template>
    <baidu-map
      :min-zoom="11"
      @ready="handler"
      @zoomend="handleZoom"
      class="map"
      :center="'北京'"
      :zoom="zoom"
      scroll-wheel-zoom
    >
    </baidu-map>
</template>

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

<style lang="less" scoped>
.map {
  width: 100%;
  height: 300px;
}
</style>

说明

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
}

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

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

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

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

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

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

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

其余可查看地图文档

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

海量点组件

<!-- 海量图 所有的定位 -->
<bm-point-collection
    @click="handlePointCollection"
    :points="allMarkers"
    shape="BMAP_POINT_SHAPE_STAR"
    size="BMAP_POINT_SIZE_HUGE"
    color="red"
/>

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 }"
/>

data () {
  return {
    labelStyle: {
       opacity: 0.9,
       border: 'none',
       color: 'white',
       'background-color': 'transparent',
       'font-size': '16px',
       'text-align': 'center'
     }
  }
}

其余组件看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>