Tengo Google Maps incrustado en el código Vue JS. Pero quiero mostrar varios marcadores usando la latitud y la longitud en ese mapa. ¿Alguna idea sobre cómo hacer eso? Aquí está mi código.
Maps.vue <template> <card type="plain" title="Google Maps"> <div id="map" class="map"> </div> </card> </template> <script> export default { mounted() { let myLatlng = new window.google.maps.LatLng(40.748817, -73.985428); let mapOptions = { zoom: 13, center: myLatlng, scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page styles: [{ "elementType": "geometry", "stylers": [{ "color": "#1d2c4d" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#8ec3b9" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#1a3646" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#4e6d70" }] } ] }; let map = new window.google.maps.Map( document.getElementById("map"), mapOptions ); let marker = new window.google.maps.Marker({ position: myLatlng, title: "Hello World!" }); marker.setMap(map); } }; </script>¿Cómo puedo mostrar múltiples marcadores en este mapa de Google? Cualquier consejo o sugerencia sería realmente útil. Gracias.
Puede usar el complemento gmap-vue para VueJS para agregar múltiples marcadores haciendo clic en el mapa.
Primero, inicialice su mapa de Google y asegúrese de agregar una serie de markers: [] que contendrá todos los marcadores que agregará en el mapa:
<template> <div> <gmap-map :center="center" ref="mmm" :zoom="12" style="width: 100%; height: 400px" @click="addMarker" > <gmap-marker :key="index" v-for="(m, index) in markers" /> </gmap-map> </div> </template> export default { name: "GoogleMap", data() { return { center: { lat: 45.508, lng: -73.587 }, markers: [], }; }, }; Puede agregar marcadores llamando al evento @click="addMarker" en <gmap-map> . Luego, en sus métodos, puede agregar la addMarker(event) donde debería poder obtener las coordenadas de clic del mapa. Tu puedes ahora
Esto es lo que parece:
methods: { addMarker(event) { const marker = { lat: event.latLng.lat(), lng: event.latLng.lng(), }; console.log(marker); this.markers.push({ position: marker }); this.$refs.mmm.panTo(marker); //this.center = marker; }, }, Aquí hay un codesandbox en funcionamiento para su referencia, simplemente coloque su clave API en el archivo main.js : https://codesandbox.io/s/gifted-fast-b41ps
Puede usar, pero no necesita ningún complemento. Realmente no ahorra tiempo en este caso de uso en mi humilde opinión.
Con la implementación estándar se vería así:
this.yourPOIs.forEach(poi => { var myLatLng = { lat: poi.latitude, lng: poi.longitude }; var marker = new google.maps.Marker({ position: myLatLng, map: this.myMap, title: poi.annotation // you can also add data here with key names that are not in use like for example "uuid: 1" so you can access that data later on if you click on markers or iterate through them }); marker.addListener('click', function() { console.log(marker.uuid); // if you want to react on clicking on a marker }); this.addedMarkers.push(marker); });myMap es el objeto del mapa escrito en una variable local en lugar de escribirlo en una variable let (probablemente necesitará acceder al mapa más adelante, por lo que es mejor que los proteja en los datos locales del componente o en su tienda vuex).
Esa es también la razón por la que empujé los marcadores en una matriz del componente. Más tarde, puede hacer esto para eliminar los marcadores nuevamente (por ejemplo, actualizar el mapa):
this.addedMarkers.forEach(marker => { marker.setMap(null); });