google maps API v3 - comment dessiner des polygones/polylignes dynamiques?

Question

J'ai 4 jours d'expérience avec l'API Javascript de Google Maps et je trouve que leur documentation et leur partage d'informations sont déroutants.

Est-ce que quelqu'un a de l'expérience ou des connaissances sur la façon de dessiner des polygones/polylignes sur une carte google (en utilisant Javascript API V3) similaire à this exemple? (Que je trouve sur this Blogpost à partir de 2008)

Pour autant que mes recherches peut me dire l'exemple utilise l'API Javascript V2 directement ou utilise la bibliothèque utilitaire GeometryControl de V2 (qui se trouve here pour référence). Je n'arrive pas à trouver si l'API Javascript V3 a un moyen de permettre une telle interface.

Je continuerai ma recherche mais j'apprécierais n'importe quel commentaire utile ou lien ou suggestion. Même si vous me pointez dans la bonne direction pour d'autres recherches. :)

Answer 1

Après beaucoup de recherches je suis tombé par exemple this. Lequel, après l'avoir découvert et googlé, semble la réponse générale à des questions comme la mienne. C'est très basique mais correct selon l'API V3. En utilisant le code de cet exemple, je construis avec succès un prototype dont j'ai besoin. Le code est basique mais j'ai trouvé qu'il peut être étendu pour mieux correspondre à mes spécifications, ce qui est bien.

Le lien fourni dans mon commentaire à la réponse de plexer serait la meilleure solution, mais la personne qui la développe déclare qu'elle est encore en développement et donc pas assez stable pour une utilisation dans des applications de version.

Answer 2

Jetez un oeil à cet exemple, de l'API Google Maps version 3 page exemples:

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

Le code écoute clique sur la carte et sur chaque clic ajoute une paire lat/lng supplémentaire dans le tableau d'une polyligne. Cela entraîne une polyligne qui rejoint chaque point cliqué. L'extension de ceci au polygone devrait être relativement simple. À un certain moment, vous devrez fermer le polygone. Vous pouvez le faire en écoutant un clic sur le polygone ou un marqueur (indiquant une intersection) ou en ayant un bouton sur lequel l'utilisateur peut cliquer, et en définissant le polygone à autoclose.

Answer 3

Cela semble être le plus proche de la mise en œuvre de l'éditeur de polygones que j'ai trouvé: http://snipplr.com/view/38270/google-maps-api-v3--enableediting-polylines/

Answer 4

Pour Google Maps v3.7, vous pouvez utiliser Drawing Library

Une autre bonne bibliothèque: polygonEdit/polylineEdit par ryshkin @ gmail. com

Answer 5

Jetez un oeil à mon script pour les lignes courbes: http://curved_lines.overfx.net/

Voici les fonctions que j'utilise:

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); 
} 

Voici votre contenu html + scripts d'initialisation:

<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

Je trouve cela un assez facile .. Vous pouvez dessiner des polygones, peuvent trouver leur longueur et son assez facile ..http://geojason.info/demos/line-length-polygon-area-google-maps-v3/

Voici un peu de code dans le cas où le lien tombe en panne.

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(); 
    } 
}