API карт Google v3 - как рисовать динамические полигоны / полилинии?

Question

У меня есть 4-дневный опыт работы с API Карт Google для Javascript, и я считаю, что их документация и обмен информацией в лучшем случае сбивают с толку.

Кто-нибудь имеет опыт или знания о том, как рисовать полигоны / полилинии на карте Google (используя Javascript API V3) аналогично этому примеру?(который я нашел в this blogPost от 2008 года)

Поскольку мое исследование может сказать мне, что пример использует Javascript API V2 напрямую или использует служебную библиотеку GeometryControl из V2 (которая может бытьнайдено здесь для справки).Кажется, я не могу определить, есть ли у Javascript API V3 какой-либо способ разрешить такой интерфейс.

Я продолжу свое исследование, но буду признателен за любые полезные комментарии, ссылки или предложения.Даже если вы укажете мне правильное направление для дальнейших исследований.:)

Answer 1

После долгих исследований я наткнулся на этот пример. Который, после его обнаружения и поиска в Google, кажется общим ответом на мои вопросы. Это очень просто, но верно в соответствии с API V3.

Используя код в этом примере, я успешно создаю прототип, который мне нужен. Код является базовым, но я обнаружил, что он может быть расширен, чтобы лучше соответствовать моим спецификациям, и это хорошо.

Ссылка, приведенная в моем комментарии к ответу плексера, будет лучшим решением, но разработчик утверждает, что он все еще находится в стадии разработки и, следовательно, недостаточно стабилен для использования в приложениях релиза.

Answer 2

Для Google Maps v3.7 вы можете использовать Библиотека чертежей

Другая хорошая библиотека: polygonEdit / polylineEdit от ryshkin@gmail.com

Answer 3

Взгляните на мой скрипт для изогнутых линий: http://curved_lines.overfx.net/

Вот функции, которые я использую:

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

Вот ваш HTML-контент + скрипт инициализации:

<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

Посмотрите на этот пример на странице примеров Maps API v3:

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

Код прослушивает щелчки на карте и при каждом щелчке добавляет дополнительную пару широта / долгота в массив полилинии. В результате получается ломаная линия, которая соединяет каждую нажатую точку.

Расширение этого до полигона должно быть относительно простым. В какой-то момент вам нужно будет закрыть многоугольник. Это можно сделать, прослушав щелчок по многоугольнику или маркеру (указывающий на пересечение), или нажав кнопку, которую пользователь может щелкнуть, и установив автоматическое закрытие многоугольника.

Answer 5

Я нашел это довольно простым ... Вы можете рисовать многоугольники, можете найти их длину и это довольно просто .. http://geojason.info/demos/line-length-polygon-area-google-maps-v3/

Вот немного кода на случай, если ссылка отключится.

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 6

Это выглядит как наиболее близкая реализация к редактору полигонов, который я нашел: http://snipplr.com/view/38270/google-maps-api-v3--enableediting-polylines/