drawing - saber - google maps API v3: ¿cómo dibujar polígonos/polilíneas dinámicas?

poligonos google maps javascript

Question

Tengo 4 días de experiencia con Google Maps JavaScript API y encuentro que su documentación y el uso compartido de información son confusos en el mejor de los casos.

¿Alguien tiene experiencia o conocimiento sobre cómo dibujar polígonos / polilíneas en un mapa de google (usando Javascript API V3) similar a this ejemplo? (que encontré en this blogPost de 2008)

Por lo que mi investigación puede decirme, el ejemplo usa Javascript API V2 directamente o usa la biblioteca de la utilidad GeometryControl desde V2 (que se puede encontrar here para referencia). Parece que no puedo encontrar si Javascript API V3 tiene alguna forma de permitir tal interfaz.

Continuaré mi investigación, pero agradecería cualquier comentario útil, enlace o sugerencia. Incluso si me señalas en la dirección correcta para futuras investigaciones. :)

Answer 1

Después de mucha investigación encontré this ejemplo. Lo cual, después de descubrirlo y buscarlo en Google, parece ser la respuesta general a preguntas como la mía. Esto es muy básico pero correcto según la API V3.

Usando el código en este ejemplo estoy construyendo con éxito un prototipo que necesito. El código es básico, pero he descubierto que puede ampliarse para ajustarse mejor a mis especificaciones, lo cual es bueno.

El enlace proporcionado en mi comentario a la respuesta de plexer sería la mejor solución, pero la persona que lo desarrolla indica que todavía está en desarrollo y, por lo tanto, no es lo suficientemente estable como para utilizarlo en las aplicaciones de lanzamiento.

Answer 2

Eche un vistazo a este ejemplo en la página de ejemplos de Maps API v3:

http://code.google.com/apis/maps/documentation/javascript/examples/polyline-complex.html

El código escucha los clics en el mapa, y en cada clic agrega un par lat / lng adicional en la matriz de una polilínea. Esto da como resultado una polilínea que une cada punto cliqueado.

Extender esto al polígono debería ser relativamente simple. En algún momento, deberá cerrar el polígono. Puede hacer esto al escuchar un clic en el polígono o un marcador (que indica una intersección) o al tener un botón en el que el usuario puede hacer clic, y configurando el polígono para que se cierre automáticamente.

Answer 3

Eche un vistazo a mi script para líneas curvas: http://curved_lines.overfx.net/

Estas son las funciones que uso:

function curved_line_generate(LatStart, LngStart, LatEnd, LngEnd, Color, Horizontal, Multiplier) {

  var LastLat = LatStart;
  var LastLng = LngStart;

  var PartLat;
  var PartLng;

  var Points = new Array(0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9);
  var PointsOffset = new Array(0.2, 0.35, 0.5, 0.55, 0.60, 0.55, 0.5, 0.35, 0.2);

  var OffsetMultiplier = 0;

  if (Horizontal == 1) {
    var OffsetLenght = (LngEnd - LngStart) * 0.1;
  } else {
    var OffsetLenght = (LatEnd - LatStart) * 0.1;
  }

  for (var i = 0; i < Points.length; i++) {
    if (i == 4) {
      OffsetMultiplier = 1.5 * Multiplier;
    }

    if (i >= 5) {
      OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
    } else {
      OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
    }

    if (Horizontal == 1) {
      PartLat = (LatStart + ((LatEnd - LatStart) * Points[i])) + OffsetMultiplier;
      PartLng = (LngStart + ((LngEnd - LngStart) * Points[i]));
    } else {
      PartLat = (LatStart + ((LatEnd - LatStart) * Points[i]));
      PartLng = (LngStart + ((LngEnd - LngStart) * Points[i])) + OffsetMultiplier;
    }

    curved_line_create_segment(LastLat, LastLng, PartLat, PartLng, Color);

    LastLat = PartLat;
    LastLng = PartLng;
  }

  curved_line_create_segment(LastLat, LastLng, LatEnd, LngEnd, Color);

}

function curved_line_create_segment(LatStart, LngStart, LatEnd, LngEnd, Color) {
  var LineCordinates = new Array();

  LineCordinates[0] = new google.maps.LatLng(LatStart, LngStart);
  LineCordinates[1] = new google.maps.LatLng(LatEnd, LngEnd);

  var Line = new google.maps.Polyline({
    path: LineCordinates,
    geodesic: false,
    strokeColor: Color,
    strokeOpacity: 1,
    strokeWeight: 3
  }); 

  Line.setMap(map);
}

Aquí está su script html content + initializing:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

  var map;
  google.maps.event.addDomListener(window, ''load'', initialize);

  function initialize() {

    /* Create Google Map */ 

    var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(41, 19.6),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById(''map_canvas''), myOptions);

    /* Add Sample Lines */

    /* Sofia - Burgas */
    curved_line_generate(42.68243562027229, 23.280029421875042, 42.488302202180364, 27.432861453125042,"#F00", true, 1);

    /* Sofia - Varna */
    curved_line_generate(42.68243562027229, 23.280029421875042, 43.19716750254011, 27.894287234375042,"#1a8809", true, 1);

    /* Ancona - Sofia */
    curved_line_generate(43.61221698671215, 13.458252078125042,42.68243562027229, 23.280029421875042, "#00F", true, 1);

    /* Sofia - Florence */
    curved_line_generate(42.68243562027229, 23.280029421875042, 43.73935229722859, 11.217041140625042,"#666", true, 1);

    /* Sofia - Athens */
    curved_line_generate(42.68243562027229, 23.280029421875042, 37.97884527841534, 23.719482546875042,"#ffa200", false, 2);
  }

</script>

Answer 4

Encontré este bastante fácil. Puedes dibujar polígonos, puedes encontrar su longitud y es bastante fácil. http://geojason.info/demos/line-length-polygon-area-google-maps-v3/

aquí hay un poco de código en caso de que el enlace se caiga.

var map;

// Create a meausure object to store our markers, MVCArrays, lines and polygons
var measure = {
  mvcLine: new google.maps.MVCArray(),
  mvcPolygon: new google.maps.MVCArray(),
  mvcMarkers: new google.maps.MVCArray(),
  line: null,
  polygon: null
};

// When the document is ready, create the map and handle clicks on it
jQuery(document).ready(function() {

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 15,
    center: new google.maps.LatLng(39.57592, -105.01476),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggableCursor: "crosshair" // Make the map cursor a crosshair so the user thinks they should click something
  });

  google.maps.event.addListener(map, "click", function(evt) {
    // When the map is clicked, pass the LatLng obect to the measureAdd function
    measureAdd(evt.latLng);
  });

});

function measureAdd(latLng) {

  // Add a draggable marker to the map where the user clicked
  var marker = new google.maps.Marker({
      map: map,
      position: latLng,
      draggable: true,
      raiseOnDrag: false,
      title: "Drag me to change shape",
      icon: new google.maps.MarkerImage(
        "/images/demos/markers/measure-vertex.png", 
        new google.maps.Size(9, 9),
        new google.maps.Point(0, 0),
        new google.maps.Point(5, 5)
      )
  });

  // Add this LatLng to our line and polygon MVCArrays
  // Objects added to these MVCArrays automatically update the line and polygon shapes on the map
  measure.mvcLine.push(latLng);
  measure.mvcPolygon.push(latLng);

  // Push this marker to an MVCArray
  // This way later we can loop through the array and remove them when measuring is done
  measure.mvcMarkers.push(marker);

  // Get the index position of the LatLng we just pushed into the MVCArray
  // We''ll need this later to update the MVCArray if the user moves the measure vertexes
  var latLngIndex = measure.mvcLine.getLength() - 1;

  // When the user mouses over the measure vertex markers, change shape and color to make it obvious they can be moved
  google.maps.event.addListener(marker, "mouseover", function() {
    marker.setIcon(
      new google.maps.MarkerImage("/images/demos/markers/measure-vertex-hover.png",
        new google.maps.Size(15, 15), 
        new google.maps.Point(0, 0), 
        new google.maps.Point(8, 8)
      )
    );
  });

  // Change back to the default marker when the user mouses out
  google.maps.event.addListener(marker, "mouseout", function() {
    marker.setIcon(
      new google.maps.MarkerImage(
        "/images/demos/markers/measure-vertex.png",
        new google.maps.Size(9, 9),
        new google.maps.Point(0, 0),
        new google.maps.Point(5, 5)
      )
    );
  });

  // When the measure vertex markers are dragged, update the geometry of the line and polygon by resetting the
  //     LatLng at this position
  google.maps.event.addListener(marker, "drag", function(evt) {
    measure.mvcLine.setAt(latLngIndex, evt.latLng);
    measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
  });

  // When dragging has ended and there is more than one vertex, measure length, area.
  google.maps.event.addListener(marker, "dragend", function() {
    if (measure.mvcLine.getLength() > 1) {
      measureCalc();
    }
  });

  // If there is more than one vertex on the line
  if (measure.mvcLine.getLength() > 1) {

    // If the line hasn''t been created yet
    if (!measure.line) {

      // Create the line (google.maps.Polyline)
      measure.line = new google.maps.Polyline({
        map: map,
        clickable: false,
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        strokeWeight: 3,
        path:measure. mvcLine
      });

    }

    // If there is more than two vertexes for a polygon
    if (measure.mvcPolygon.getLength() > 2) {

      // If the polygon hasn''t been created yet
      if (!measure.polygon) {

        // Create the polygon (google.maps.Polygon)
        measure.polygon = new google.maps.Polygon({
          clickable: false,
          map: map,
          fillOpacity: 0.25,
          strokeOpacity: 0,
          paths: measure.mvcPolygon
        });

      }

    }

  }

  // If there''s more than one vertex, measure length, area.
  if (measure.mvcLine.getLength() > 1) {
      measureCalc();
  }
}

Answer 5

Esta parece ser la implementación más cercana al editor de polígonos que he encontrado: http://snipplr.com/view/38270/google-maps-api-v3--enableediting-polylines/

Answer 6

Para Google Maps v3.7, puede usar Drawing Library

Otra buena biblioteca: polygonEdit/polylineEdit polylineEdit por [email protected]