0

Lo que sucede es que necesito ayuda en mi código he creado una función para utilizar las polylines

El codigo es el siguiente:

// Variables globales
let map;
let marker;
// Geolocalizacion
let watchID;
let geoLoc;

// Funcion de dibujado de mapa
function initMap() {
    const myLating = { lat: -34.397, lng: 150.644 };
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 18,
        center: myLating,
    });
    marker = new google.maps.Marker({
        position: myLating,
        map,
        title: "Usted esta aqui"
    });
    getPosition();

    poly = new google.maps.Polyline({
        strokeColor: "#000000",
        strokeOpacity: 1.0,
        strokeWeight: 3,
        });
        poly.setMap(map);
        // Agrega en un listado el evento click y agregando su posicion
        map.addListener("click", addLatLng);
}

// Controla los eventos de clic en un mapa y agrega un nuevo punto lineal
function addLatLng(event) {
    const path = poly.getPath();

    console.log(path);
    // Debido a que la ruta es un MVCArray, simplemente podemos agregar una nueva coordenada
    // y aparecerá automáticamente. 
    path.push(event.latLng);
    // Agrega un nuevo marcador en el nuevo punto trazado en el punto lineal.
    

    new google.maps.Marker({
            position: event.latLng,
            title: "#" + path.getLength(),
            map: map,
    });


}

Como podemos observar agrego un marker por cada que alguien da un click en el mapa, la situacion es que nunca cierra ese polígono y yo quisiera cerrar el polígono cuando toque el primer marcador, ¿Alguien por favor me puede ayudar?

Anexo imagen del mapa como se muestra

Lo que muestra el mapa

1 respuesta 1

1

En lo medular: no cierra porque es una polilínea, para las cuales no tiene ningún significado topológico el hecho de "cerrarse". Por el contrario, un polígono no puede existir "abierto" entre otras restricciones.

Lo que quieres hacer no es tan simple como reemplazar la polilínea con un polígono, porque tendrías que esperar a tener 3 puntos para empezar a mostrar el resultado parcial. Si bien se podría usar un google.maps.drawing.DrawingManager el hecho de ponerse en modo "dibujar polígono" deja tomada la interfaz hasta que lo completas o lo cancelas, y eso me parece que no es lo que buscas.

Hice una solución como prueba de concepto que salió un poco más extensa de lo que quería. Básicamente mantengo el listener que añade puntos a la polilínea al pinchar el mapa.

Sobre el path de la polilínea pongo también un listener en el evento insert_at (lo hice así para dejar los callbacks algo menos atestados) en donde se adosa un marcador a un MVCArray que le puse como extra a la polilínea (también podría haber puesto los marcadores en el espacio global).

Como el insert_at me da el índice insertado, ya tengo el label del marcador. De entre estos markers, sobre el primero declaro un lístener tal que al hacer click sobre él se gatillan las siguientes acciones:

  • Se crea un polígono, cuyo anillo exterior (y el único en este caso) es una copia del anillo cerrado de la polilínea
  • El path de la polilínea se vacía
  • Se eliminan todos los markers que le había adosado

Salvo por el polígono que queda en el mapa, el resto está listo para hacer el ejercicio una y otra vez.

let poly, map;
let poligonos = [];

function appendMarker(polyline, index) {
  let newMarker = new google.maps.Marker({
    map: map,
    position: polyline.getPath().getAt(index),
    label: `#${index}`,
    clickable: !index,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: index ? '#09F' : '#F90',
      fillOpacity: 0.4,
      strokeColor: '#00A',
      strokeOpacity: 0.9,
      strokeWeight: 0.5,
      scale: 9
    }
  });
  polyline.get('markers').push(newMarker);
  return newMarker;
}

function initMap() {

  map = new google.maps.Map(document.querySelector('#map'), {
    center: {
      lat: -33.47,
      lng: -70.656
    },
    zoom: 13
  });
  map.setClickableIcons(false);
  poly = new google.maps.Polyline({
    strokeColor: "#0077cc",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map
  });
  poly.set('markers', new google.maps.MVCArray());



  map.addListener("click", ({
    latLng
  }) => {
    const path = poly.getPath();
    path.push(latLng);
  });

  google.maps.event.addListener(poly.getPath(), 'insert_at', (index) => {
    let newMarker = appendMarker(poly, index);

    // El primer marker tiene el poder de cerrar el polígono
    if (index === 0) {
      google.maps.event.addListener(newMarker, 'click', () => {
        let path = poly.getPath(),
          // creo un polígono usando el anillo de la polilínea
          newPolygon = new google.maps.Polygon({
            map,
            strokeWeight: 1,
            fillColor: '#0a0',
            fillOpacity: 0.2,
            path: path.getArray()
          });
        // lo añado a un array en el scope super-superior por si se quiere usar en algo....
        poligonos.push(newPolygon);
        // vacío el path de la polilínea
        path.clear();
        // vacío los markers
        let markers = poly.get('markers')
        while (markers.getLength()) {
          markers.pop().setMap(null);
        }
      });
    }

  });
}
<script src="https://maps.googleapis.com/maps/api/js?library=geometry&key=AIzaSyBRqo4qwqHHrtbY9aL6vYYDw1GOhkK97MQ&callback=initMap&libraries=geometry" async defer>
</script>
<div id="map" style="width:100%;height:300px;"></div>

Si te fijas, tuve que pasar el path a su array subyacente, puesto que si asigno el mismo path al polígono el limpiar la polilínea también lo limpiará a él.

Ojo que si tu polilínea se intersecta a sí misma dará origen a un polígono topológicamente incorrecto (lo cual no importa para este caso porque a google le da lo mismo)

3
  • Eres un Dios, muchas gracias por ayudarme en este caso Commented el 26 mar. 2021 a las 18:10
  • Buenísimo, una pregunta como podría obtener las coordenadas (latitud, longitud) de los puntos marcados del polígono, gracias de antemano. Commented el 11 ene. 2022 a las 16:39
  • Te invito a hacer una pregunta nueva para eso: es.stackoverflow.com/questions/ask
    – ffflabs
    Commented el 12 ene. 2022 a las 1:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.