vue-baidu-map简单实现地图找房

凤梨罐头cc
4,249 阅读3分钟

1.差不多的地图找房

2.百度地图api的示例demo-----点聚合

3.具体实现

3.1.安装

npm i --save vue-baidu-map

3.2全局注册

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: 'YOUR_APP_KEY'
})

3.3用法示例

<template>
   <baidu-map class="map" center="中国" :scroll-wheel-zoom='true'>
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <bml-marker-clusterer :averageCenter="true">
      <bm-marker v-for="(marker,index) in markers" :key="index" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker>
    </bml-marker-clusterer>
  </baidu-map>
</template>
<script>
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default { 
  data () {
   
    return {
      markers:[]
    }
  },
  components: {
    BmlMarkerClusterer
  },
  mounted(){
     // 插入 10 个随机点
    for (let i = 0; i < 12; i++) {
      let position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
      this.markers.push(position)
    }
  },
  methods:{
     handler({BMap, map}){},
  }

}
</script>

BmMarker：具体的每个坐标点

BmlMarkerClusterer：能够聚合它包含的所有 BmMarker 组件，根据设置的gridSize（网格大小，相关具体属性可以去百度地图点聚合的api查看）属性结合地图的缩放层级（zoom）动态实现点聚合

结合实际需求进行改造

1.按区域分组聚合

将坐标点分组，需要知道每组的中心点坐标方便为聚合点添加标签，遍历生成 BmlMarkerClusterer，这样可以控制每个聚合点的 聚合数量和单独设置每个区域的聚合点的样式

2.自定义聚合点或具体坐标点的样式和内容

具体字段说明并没有，比较坑爹，开发文档里不太好找，在百度地图开源库里才能找到

  • 注意url必须使用绝对路径或者放在static里的图片路径，否则设置无效，assets 里面的图片是会经过 webpack 的 loader 处理的，而 static 里面的图片是被直接复制到 dist/static 下面的。

  • 自定义内容需使用BmLabel标签，其content的内容支持HTML，不过需要知道聚合时的地图缩放层级（zoom）控制隐藏显示

<bm-label
    v-if="zoom == 13"
    :massClear='true'
    @click="cluster({lng: city.markers[0].lng, lat: city.markers[0].lat})"
    class="bmap"
    :content="city.name+city.num+'套'"
    :position="{lng: city.lng, lat: city.lat}" 
    :labelStyle="labelcss2"
    :offset="{width: -40, height: 8}"
/>
  • 点击标签实现同点击聚合点的响应事件，只需增大地图容器的层级同时设置点击点的坐标为地图容器的中心点

3.一级分组点聚合

设置聚合的最大缩放级别（maxZoom）==地图容器的缩放等级（min-zoom）

4.多层级分组点聚合

每次点击结合地图缩放层级和动态设置分组数据即可

总结与优化

每次都是将所有数据标注在地图上，对于数据较少和分级不多的的情况下还是比较简单和友好的，如果需要一级以上的更多数据的聚合则可以放弃点聚合，看似点聚合，实则是多点位标记

  • 根据自己需要展示几层聚合，设置好地图缩放的“级别段”
  • 先获取定位点，添加地图展示，并设置最大、最小缩放级别，并根据对应层级的数据添加标记点
  • 地图拖动或缩放时时监听地图缩放等级，以及地图中心点，去请求对应层级的数据，为了避免数据多余影响效率和性能，每次请求只请求可视区域内的数据。清除上一层级的标记点，添加新的标记点
  • 聚合功能已经可以展示出来了，点击标签只需要增加地图层次级别和添加额外的自定义事件就可以了

结语

本人第一篇博客，欢迎点赞与指正。

avatar
文章
阅读
粉丝