Saltar al contenido

Cómo dibujar una forma de polígono dinámicamente en el mapa en Angular

Por fin luego de mucho trabajar hemos dado con la solución de este apuro que tantos lectores de esta web han tenido. Si tienes alguna información que compartir no dejes de compartir tu información.

Solución:

Actualización 26 de abril de 2018.

No estoy seguro, pero parece que Angular Google Maps ya admite el dibujo de polígonos. Puedes consultar más.


Compruebe el plunker de trabajo:

  1. Versión básica (solo dibujar polígonos) https://stackblitz.com/edit/angular-draw-polygon-google-maps

  2. Versión actualizada (dibujar polígono y verificación de intersección) (plunker no funciona ahora) https://embed.plnkr.co/3sNWwX/

AGM es la mejor biblioteca para Angular 2 por ahora, pero aún necesita actualizarse más para reflejar toda la API de Google Maps. Así que mejor sigamos el documento de Google Maps y lo usemos directamente antes de que la comunidad Angular lo apoye.

https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

Tenga en cuenta que es muy básico y le permite dibujar un polígono y obtener la coordenada una vez que termine. Es posible que también desee mover todo el código relacionado con el mapa a un servicio.

ngOnInit() 
    this.map = new google.maps.Map(document.getElementById('map'), 
        center:  lat: -34.397, lng: 150.644 ,
        zoom: 8
    );

    this.drawingManager = new google.maps.drawing.DrawingManager(
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        drawingControl: true,
        drawingControlOptions: 
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['polygon']
        
    );

    this.drawingManager.setMap(this.map);
    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => 
        // Polygon drawn
        if (event.type === google.maps.drawing.OverlayType.POLYGON) 
          //this is the coordinate, you can assign it to a variable or pass into another function.
             alert(event.overlay.getPath().getArray());
        
    );

Consulte esto e intente implementarlo usando javascript. El código será mucho más simple (personalmente prefiero esto) https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

Puedes respaldar nuestra investigación dejando un comentario y dejando una valoración te estamos eternamente agradecidos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *