290144e9
 易尊强
第一次
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<template>
<span>
<slot></slot>
</span>
</template>
<script>
import MarkerClusterer from 'bmaplib.markerclusterer'
import {createSize} from '../base/factory.js'
import commonMixin from '../base/mixins/common.js'
export default {
name: 'bml-marker-clusterer',
mixins: [commonMixin('markerClusterer')],
props: {
gridSize: {
type: Object
},
maxZoom: {
type: Number
},
minClusterSize: {
type: Number
},
styles: {
type: Array,
default () {
return []
}
},
averageCenter: {
type: Boolean,
default: false
}
},
watch: {
gridSize: {
handler (val) {
const {BMap, originInstance} = this
originInstance.setGridSize(BMap, val.map)
},
deep: true
},
maxZoom (val) {
const {originInstance} = this
originInstance.setMaxZoom(val)
},
minClusterSize: {
handler (val) {
const {BMap, originInstance} = this
originInstance.setMinClusterSize(createSize(BMap, val))
},
deep: true
},
styles: {
handler (val) {
const {BMap, originInstance} = this
const obj = JSON.parse(JSON.stringify(val)).map(item => {
item.size = item.size && createSize(BMap, item.size)
return item
})
originInstance.setStyles(obj)
},
deep: true
},
averageCenter (val) {
this.reload()
}
},
methods: {
load () {
const {BMap, map, gridSize, minClusterSize, maxZoom, styles, averageCenter} = this
this.originInstance = new MarkerClusterer(map, {
gridSize: gridSize && createSize(BMap, gridSize),
maxZoom,
minClusterSize: minClusterSize && createSize(BMap, minClusterSize),
styles: styles.map(item => {
item.size = createSize(BMap, item.size)
return item
}),
isAverageCenter: averageCenter
})
this.$nextTick(() => {
const markers = this.$children.map(inst => inst.originInstance).filter(marker => marker instanceof BMap.Marker)
this.originInstance.addMarkers(markers)
})
}
},
beforeCreate () {
this.preventChildrenRender = true
}
}
</script>
|
