Update README.md

This commit is contained in:
Felix Ranesberger
2023-07-06 14:29:47 +02:00
committed by GitHub
parent a540d4668b
commit e3b743a2ef

View File

@@ -133,9 +133,9 @@ If you want to zoom in on the map as far as you can, but still see all markers,
```vue ```vue
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { onMounted, ref, watch } from 'vue';
const markers = [ const markers = ref([
{ {
lat: 47.8557578, lat: 47.8557578,
lng: 12.1133382, lng: 12.1133382,
@@ -148,7 +148,7 @@ const markers = [
lat: 47.8568879, lat: 47.8568879,
lng: 12.1270439, lng: 12.1270439,
}, },
]; ]);
const googleMapRef = ref(); const googleMapRef = ref();
@@ -160,12 +160,18 @@ async function fitMarkerBounds() {
const bounds = new window.google.maps.LatLngBounds(); const bounds = new window.google.maps.LatLngBounds();
markers.forEach((marker) => { markers.value.forEach((marker) => {
bounds.extend(marker); bounds.extend(marker);
}); });
googleMapInstance.fitBounds(bounds); googleMapInstance.fitBounds(bounds);
} }
// center markers on first render
onMounted(fitMarkerBounds);
// center markers, if they are adjusted
watch(markers, fitMarkerBounds);
</script> </script>
<template> <template>
@@ -177,6 +183,7 @@ async function fitMarkerBounds() {
/> />
</GMapMap> </GMapMap>
</template> </template>
``` ```
### Cluster ### Cluster