vue-baidu-map dot aggregation bml-marker-clusterer 根据不同类型设置聚合图标
最编程
2024-05-05 14:28:37
...
<template>
<div>
<baidu-map class='mapView' :center="center" :zoom="zoom" :autoLocation="true" :scroll-wheel-zoom="true"
@moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT">
</bm-map-type>
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true">
</bm-geolocation>
<bml-marker-clusterer :averageCenter="true" :styles='mystyle1'>
<bm-marker v-for="(marker,index) of listPointData1" :key='marker.id'
:position="{lng: marker.lng, lat: marker.lat}"
:icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
</bm-marker>
</bml-marker-clusterer>
<bml-marker-clusterer :averageCenter="true" :styles='mystyle2'>
<bm-marker v-for="(marker,index) of listPointData2" :key='marker.id'
:position="{lng: marker.lng, lat: marker.lat}"
:icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
</bm-marker>
</bml-marker-clusterer>
<bml-marker-clusterer :averageCenter="true" :styles='mystyle3'>
<bm-marker v-for="(marker,index) of listPointData3" :key='marker.id'
:position="{lng: marker.lng, lat: marker.lat}"
:icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
</bm-marker>
</bml-marker-clusterer>
<bml-marker-clusterer :averageCenter="true" :styles='mystyle4'>
<bm-marker v-for="(marker,index) of listPointData4" :key='marker.id'
:position="{lng: marker.lng, lat: marker.lat}"
:icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
</bm-marker>
</bml-marker-clusterer>
<bml-marker-clusterer :averageCenter="true" :styles='mystyle5'>
<bm-marker v-for="(marker,index) of listPointData5" :key='marker.id'
:position="{lng: marker.lng, lat: marker.lat}"
:icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
</bm-marker>
</bml-marker-clusterer>
<bm-view class='mapContent'>
</bm-view>
</baidu-map>
</div>
</template>
<script>
import mapIconPath1 from "../../../assets/image/dw1.png"
import mapIconPath2 from "../../../assets/image/dw2.png"
import mapIconPath3 from "../../../assets/image/dw3.png"
import mapIconPath4 from "../../../assets/image/dw4.png"
import mapIconPath5 from "../../../assets/image/dw5.png"
import {
BmlMarkerClusterer
} from 'vue-baidu-map'
export default {
components: {
BmlMarkerClusterer,
},
data() {
return {
listPointData1: [],
listPointData2: [],
listPointData3: [],
listPointData4: [],
listPointData5: [],
mystyle1: [{
url: mapIconPath1,
size: {
width: 48,
height: 48,
},
textColor: '#ffffff',
opt_textSize: 10
}],
mystyle2: [{
url: mapIconPath2,
size: {
width: 48,
height: 48,
},
textColor: '#ffffff',
opt_textSize: 10
}],
mystyle3: [{
url: mapIconPath3,
size: {
width: 48,
height: 48,
},
textColor: '#ffffff',
opt_textSize: 10
}],
mystyle4: [{
url: mapIconPath4,
size: {
width: 48,
height: 48,
},
textColor: '#ffffff',
opt_textSize: 10
}],
mystyle5: [{
url: mapIconPath5,
size: {
width: 48,
height: 48,
},
textColor: '#ffffff',
opt_textSize: 10
}],
zoom: 6,
center: {
lng: 118.196,
lat: 33.011265
},
mapIcon1: mapIconPath1, //自定义map maker icon
mapIcon2: mapIconPath2, //自定义map maker icon
mapIcon3: mapIconPath3, //自定义map maker icon
mapIcon4: mapIconPath4, //自定义map maker icon
mapIcon5: mapIconPath5, //自定义map maker icon
}
},
created() {
this.getData()
},
methods: {
//点聚合单个点点击事件
clickHandler(e) {
console.log("类型", e.type);
},
getData() {
// 插入 10 个随机点
const listPointData1 = []
const listPointData2 = []
const listPointData3 = []
const listPointData4 = []
const listPointData5 = []
const num = 100
for (let i = 1; i < num; i++) {
const position = {
lng: Math.random() * 40 + 85,
lat: Math.random() * 30 + 21,
id: i,
type: 1
}
this.listPointData1.push(position)
}
for (let i = 1; i < num; i++) {
const position = {
lng: Math.random() * 40 + 85,
lat: Math.random() * 30 + 21,
id: i,
type: 2
}
this.listPointData2.push(position)
}
for (let i = 1; i < num; i++) {
const position = {
lng: Math.random() * 40 + 85,
lat: Math.random() * 30 + 21,
id: i,
type: 3
}
this.listPointData3.push(position)
}
for (let i = 1; i < num; i++) {
const position = {
lng: Math.random() * 40 + 85,
lat: Math.random() * 30 + 21,
id: i,
type: 4
}
this.listPointData4.push(position)
}
for (let i = 1; i < num; i++) {
const position = {
lng: Math.random() * 40 + 85,
lat: Math.random() * 30 + 21,
id: i,
type: 5
}
this.listPointData5.push(position)
}
},
iconSelect(value) {
if (value == 1) {
return mapIconPath1
} else if (value == 2) {
return mapIconPath2
} else if (value == 3) {
return mapIconPath3
} else if (value == 4) {
return mapIconPath4
} else if (value == 5) {
return mapIconPath5
} else {
return mapIconPath
}
},
syncCenterAndZoom(e) {
const {
lng,
lat
} = e.target.getCenter()
this.center.lng = lng
this.center.lat = lat
this.zoom = e.target.getZoom()
},
},
}
</script>
<style>
.mapView {
width: 100%;
height: 850px;
position: relative;
}
.mapContent {
width: 100%;
height: 850px;
}
</style>