45 lines
805 B
Markdown
45 lines
805 B
Markdown
# Cluster
|
|
To cluster objects you simply wrap your markers with the cluster component.
|
|
|
|
|
|
```vue
|
|
<template>
|
|
<GmapMap
|
|
:center="center"
|
|
:zoom="7"
|
|
map-type-id="terrain"
|
|
style="width: 500px; height: 300px"
|
|
>
|
|
<GmapCluster>
|
|
<GmapMarker
|
|
:key="index"
|
|
v-for="(m, index) in markers"
|
|
:position="m.position"
|
|
:clickable="true"
|
|
:draggable="true"
|
|
@click="center=m.position"
|
|
/>
|
|
</GmapCluster>
|
|
</GmapMap>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'App',
|
|
data() {
|
|
return {
|
|
center: {lat: 51.093048, lng: 6.842120},
|
|
markers: [
|
|
{
|
|
position: {
|
|
lat: 51.093048, lng: 6.842120
|
|
},
|
|
}
|
|
, // Along list of clusters
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|