1.差不多的地圖找房

2.百度地圖api的示例demo-----點(diǎn)聚合

3.具體實(shí)現(xiàn)

3.1.安裝

npm i --save vue-baidu-map

復(fù)制代碼

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'

})

復(fù)制代碼

3.3用法示例

import {BmlMarkerClusterer} from 'vue-baidu-map'

export default {

data () {

return {

markers:[]

}

},

components: {

BmlMarkerClusterer

},

mounted(){

// 插入 10 個(gè)隨機(jī)點(diǎn)

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

}

}

復(fù)制代碼

BmMarker：具體的每個(gè)坐標(biāo)點(diǎn)

BmlMarkerClusterer：能夠聚合它包含的所有 BmMarker 組件，根據(jù)設(shè)置的gridSize(網(wǎng)格大小，相關(guān)具體屬性可以去百度地圖點(diǎn)聚合的api查看)屬性結(jié)合地圖的縮放層級(jí)(zoom)動(dòng)態(tài)實(shí)現(xiàn)點(diǎn)聚合

結(jié)合實(shí)際需求進(jìn)行改造

1.按區(qū)域分組聚合

將坐標(biāo)點(diǎn)分組，需要知道每組的中心點(diǎn)坐標(biāo)方便為聚合點(diǎn)添加標(biāo)簽，遍歷生成 BmlMarkerClusterer，這樣可以控制每個(gè)聚合點(diǎn)的 聚合數(shù)量和單獨(dú)設(shè)置每個(gè)區(qū)域的聚合點(diǎn)的樣式

2.自定義聚合點(diǎn)或具體坐標(biāo)點(diǎn)的樣式和內(nèi)容

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

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

自定義內(nèi)容需使用BmLabel標(biāo)簽，其content的內(nèi)容支持HTML，不過需要知道聚合時(shí)的地圖縮放層級(jí)(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}"

/>

點(diǎn)擊標(biāo)簽實(shí)現(xiàn)同點(diǎn)擊聚合點(diǎn)的響應(yīng)事件，只需增大地圖容器的層級(jí)同時(shí)設(shè)置點(diǎn)擊點(diǎn)的坐標(biāo)為地圖容器的中心點(diǎn)

3.一級(jí)分組點(diǎn)聚合

設(shè)置聚合的最大縮放級(jí)別(maxZoom)==地圖容器的縮放等級(jí)(min-zoom)

4.多層級(jí)分組點(diǎn)聚合

每次點(diǎn)擊結(jié)合地圖縮放層級(jí)和動(dòng)態(tài)設(shè)置分組數(shù)據(jù)即可

總結(jié)與優(yōu)化

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

根據(jù)自己需要展示幾層聚合，設(shè)置好地圖縮放的“級(jí)別段”

先獲取定位點(diǎn)，添加地圖展示，并設(shè)置最大、最小縮放級(jí)別，并根據(jù)對應(yīng)層級(jí)的數(shù)據(jù)添加標(biāo)記點(diǎn)

地圖拖動(dòng)或縮放時(shí)時(shí)監(jiān)聽地圖縮放等級(jí)，以及地圖中心點(diǎn)，去請求對應(yīng)層級(jí)的數(shù)據(jù)，為了避免數(shù)據(jù)多余影響效率和性能，每次請求只請求可視區(qū)域內(nèi)的數(shù)據(jù)。清除上一層級(jí)的標(biāo)記點(diǎn)，添加新的標(biāo)記點(diǎn)

聚合功能已經(jīng)可以展示出來了，點(diǎn)擊標(biāo)簽只需要增加地圖層次級(jí)別和添加額外的自定義事件就可以了

結(jié)語

本人第一篇博客，歡迎點(diǎn)贊與指正。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。