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用法示例

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}){},

}

}

復制代碼

BmMarker：具體的每個坐標點

BmlMarkerClusterer：能夠聚合它包含的所有 BmMarker 組件，根據設置的gridSize(網格大小，相關具體屬性可以去百度地圖點聚合的api查看)屬性結合地圖的縮放層級(zoom)動態實現點聚合

結合實際需求進行改造

1.按區域分組聚合

將坐標點分組，需要知道每組的中心點坐標方便為聚合點添加標簽，遍歷生成 BmlMarkerClusterer，這樣可以控制每個聚合點的 聚合數量和單獨設置每個區域的聚合點的樣式

2.自定義聚合點或具體坐標點的樣式和內容

具體字段說明并沒有，比較坑爹，開發文檔里不太好找，在百度地圖開源庫里才能找到

注意url必須使用絕對路徑或者放在static里的圖片路徑，否則設置無效，assets 里面的圖片是會經過 webpack 的 loader 處理的，而 static 里面的圖片是被直接復制到 dist/static 下面的。

自定義內容需使用BmLabel標簽，其content的內容支持HTML，不過需要知道聚合時的地圖縮放層級(zoom)控制隱藏顯示

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.多層級分組點聚合

每次點擊結合地圖縮放層級和動態設置分組數據即可

總結與優化

每次都是將所有數據標注在地圖上，對于數據較少和分級不多的的情況下還是比較簡單和友好的，如果需要一級以上的更多數據的聚合則可以放棄點聚合，看似點聚合，實則是多點位標記

根據自己需要展示幾層聚合，設置好地圖縮放的“級別段”

先獲取定位點，添加地圖展示，并設置最大、最小縮放級別，并根據對應層級的數據添加標記點

地圖拖動或縮放時時監聽地圖縮放等級，以及地圖中心點，去請求對應層級的數據，為了避免數據多余影響效率和性能，每次請求只請求可視區域內的數據。清除上一層級的標記點，添加新的標記點

聚合功能已經可以展示出來了，點擊標簽只需要增加地圖層次級別和添加額外的自定義事件就可以了

結語

本人第一篇博客，歡迎點贊與指正。

總結

以上是生活随笔為你收集整理的php地图找房代码,vue-baidu-map简单实现地图找房的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。