1. Same map for apartment hunting

Installed 3.1.

npm i --save vue-baidu-map
Copy the code

3.2 Global Registration

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'
})
Copy the code

3.3 Usage Examples

<template>
   <baidu-map class="map" center="China" :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(){// Insert 10 random pointsfor (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>
Copy the code

BmMarker: Specific for each coordinate point

BmlMarkerClusterer: it can aggregate all BmMarker components contained in it, and dynamically realize point aggregation according to the set gridSize (gridSize, specific properties can be viewed in baidu map point aggregation API) attributes combined with the map’s zoom level

Transform according to actual demand

1. Group and aggregate by region

To group coordinate points, it is necessary to know the central point coordinates of each group for the convenience of adding labels for aggregation points and traversing to generate BmlMarkerClusterer. In this way, the number of aggregation points of each aggregation point can be controlled and the style of aggregation points of each region can be set separately

2. Customize the style and content of aggregation points or specific coordinate points

  • Dist /static: The url must be an absolute path or an image path placed in static. Otherwise, the configuration is invalid. The image inside assets is processed by the Webpack loader, while the image inside static is copied directly to dist/static.

  • Custom content needs to use the BmLabel tag. The content of the content supports HTML, but you need to know the map zoom level (ZOOM) control to hide the display during aggregation

<bm-label
    v-if="zoom == 13"
    :massClear='true'
    @click="cluster({lng: city.markers[0].lng, lat: city.markers[0].lat})"
    class="bmap"
    :content="The city. The name + city. Num + 'a'"
    :position="{lng: city.lng, lat: city.lat}" 
    :labelStyle="labelcss2"
    :offset="{width: -40, height: 8}"
/>  
Copy the code
  • Click the label to achieve the same response event as click the aggregation point, just increase the level of the map container and set the coordinates of the click point as the center point of the map container

3. One-level grouping point aggregation

Set the maximum zoom level of the aggregation (maxZoom) == The zoom level of the map container (min-zoom)

A single click combines the map scaling hierarchy and dynamic setting of grouped data

Summary and optimization

Each time, all data are marked on the map, which is relatively simple and friendly for the case of less data and less classification. If the aggregation of more data above one level is needed, point aggregation can be abandoned, seemingly point aggregation, but in fact, it is multi-point marking

  • Show several layers of aggregation according to your needs, and set the “level segment” for map scaling.
  • First get the registration point, add the map display, and set the maximum and minimum zoom levels, and add markers based on the corresponding level of data
  • Map drag or zoom always monitor map zoom level, as well as the center point of the map, to request the corresponding level of data, in order to avoid the impact of redundant data efficiency and performance, each request only requests the data in the visible area. Clear the markers from the previous level and add new markers
  • The aggregation function is already on display, and clicking on the TAB simply increases the map hierarchy level and adds additional custom events

conclusion

My first blog, welcome to like and correction.