es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Configura las coordenadas lat/long de forma dinámica para el mapa de Google y añade un marcador: Angular 12

Estoy utilizando Google Maps en un proyecto de Angular (ngx-google-places-autocomplete y angular/google-maps). La funcionalidad es que el usuario puede seleccionar una ubicación y se guarda su latitud y longitud. Ahora, dependiendo de las coordenadas almacenadas (latitud y longitud), necesito mostrar el mapa de Google y un marcador en esas coordenadas.

HTML

<google-map width="400px" height="280px" [zoom]="zoom" [center]="initialCoordinates" [options]="mapConfigurations">
</google-map>

ts

export class SampleComponent implements OnInit {
    myDetails: any = [];
    mylat: string = "51.076101702905575"; // latitud por defecto
    mylong: string = "10.867780927493548"; // longitud por defecto
    zoom = 12;
    initialCoordinates = {
        lat: +this.myLat,
        lng: +this.myLong,
    };
    mapConfigurations = {
        disableDefaultIU: true,
        fullscreenControl: true,
        zoomControl: true,
        mapTypeId: "roadmap",
        scrollwheel: false,
        disableDoubleClickZoom: true,
    };

    ngOnInit(): void {
        this.getDetails();
    }

    getDetails() {
        this.myService.getDetails(this.formData).subscribe((data) => {
            if (data["status"] === false) {
                // hacer algo si el estado es falso
            } else {
                this.myDetails = data["data"];
                this.myLat = this.myDetails.latitude;
                this.myLong = this.myDetails.longitude;
                this.initialCoordinates = {
                    lat: +this.myLat,
                    lng: +this.myLong,
                };
            }
        });
    }
}

El código anterior muestra un mapa con valores de latitud y longitud por defecto cada vez. Las variables myLat y myLong siempre toman esos valores predeterminados. No sobrescriben los valores de la base de datos que establezco en la función getDetails. Como principiante en Angular, no estoy seguro de cómo puedo lograr eso.

¿Cómo debería establecer las latitudes y longitudes obtenidas de la base de datos en el mapa de Google y mostrar un marcador en ellas?

Por favor, ayuda y orientación.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Para configurar la latitud y longitud obtenida de la base de datos en el mapa de Google y mostrar el marcador en esa ubicación, puedes actualizar el objeto initialCoordinates en la función getDetails() después de obtener los datos de la base de datos.

    Así es cómo puedes modificar tu código para lograrlo:

    HTML:

    <google-map width="400px" height="280px" [zoom]="zoom" [center]="initialCoordinates" [options]="mapConfigurations">
    </google-map>
    

    TypeScript:

    export class SampleComponent implements OnInit {
      myDetails: any = [];
      myLat: string = "51.076101702905575"; // latitud predeterminada
      myLong: string = "10.867780927493548"; // longitud predeterminada
      zoom = 12;
      initialCoordinates = {
        lat: +this.myLat,
        lng: +this.myLong,
      };
      mapConfigurations = {
        disableDefaultUI: true,
        fullscreenControl: true,
        zoomControl: true,
        mapTypeId: "roadmap",
        scrollwheel: false,
        disableDoubleClickZoom: true,
      };
      ngOnInit(): void {
        this.getDetails();
      }
    
      getDetails() {
        this.myService.getDetails(this.formData).subscribe((data) => {
          if (data["status"] === false) {
          } else {
            this.myDetails = data["data"];
            this.myLat = this.myDetails.latitude;
            this.myLong = this.myDetails.longitude;
            this.initialCoordinates = {
              lat: +this.myLat,
              lng: +this.myLong,
            };
          }
        });
      }
    }
    

    En la función getDetails(), después de obtener los datos de la base de datos, actualizamos las variables myLat y myLong con los nuevos valores, y luego actualizamos el objeto initialCoordinates con esas variables. Esto actualizará el mapa de Google y mostrará el marcador en la nueva ubicación.

    ¡Espero que esto ayude! Avísame si tienes alguna pregunta adicional.

Comments are closed.