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

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 al ejemplo this? (Que he encontrado en this BlogPost de 2008)

Por lo que mi investigación me puede decir el ejemplo utiliza la API de JavaScript V2 directa o utiliza la biblioteca de utilidades GeometryControl de V2 (que se puede encontrar here de 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é el ejemplo this. 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 para usar en las aplicaciones de lanzamiento.

Answer 2

Tome un vistazo a este ejemplo, desde la página Mapas ejemplos API v3:

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

El código de escucha, hace clic en el mapa, y en cada clic añade un par de GNL/lat 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 debe 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

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

Answer 4

Para Google Maps v3.7, puede utilizar Drawing Library

Otra buena biblioteca: polygonEdit/polylineEdit por ryshkin @ gmail. com

Answer 5

Tome un vistazo a mi guión de líneas curvas: http://curved_lines.overfx.net/

Estas son las funciones que utilizo:

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í es su contenido HTML + script de inicialización:

<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 6

Me pareció que éste era bastante fácil .. Puede dibujar polígonos, puede 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(); 
    } 
}