API GoogleMaps V3 - comment dessiner des polygones/polylines dynamiques?

Pour Google Maps v3.7, vous pouvez utiliser Bibliothèque De Dessins

une Autre bonne bibliothèque: polygonEdit/polylineEdit

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

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

jetez un coup d'oeil à cet exemple, à partir de la page Maps API v3 examples:

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

le code écoute pour cliquer sur la carte, et à chaque clic ajoute une paire lat/lng supplémentaire dans le tableau d'un polyligne. Il en résulte un polyligne qui relie chaque point cliqué.

étendre ceci au polygone devrait être relativement simple. À un certain point, vous aurez besoin de fermer la polygone. Vous pouvez le faire en écoutant un clic sur le polygone ou un marqueur (indiquant une intersection) ou en ayant un bouton que l'utilisateur peut cliquer, et la configuration du polygone à l'autoclose.

j'ai trouvé celui-ci assez facile.. Vous pouvez dessiner des polygones, peuvent trouver leur longueur et c'est assez facile.. http://geojason.info/demos/line-length-polygon-area-google-maps-v3/

voici un peu de code au cas où link tomberait.

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

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