Как сохранить состояние отрисовки карты (полигон, полилиния, маркеры)

Я хочу включить рисование на Картах Google, например (см. этот пример) Когда пользователь закончит рисовать, он нажмет кнопку «Сохранить», чтобы сохранить свои рисунки в базе данных или файле KML, что угодно :) .. Я не знаю, как сохранить часть? Может ли кто-нибудь помочь мне


google-maps-api-3 drawing kml
person mohd khanfer    schedule 01.06.2012    source источник

Ответы (2)


arrow_upward
11
arrow_downward

Здесь http://jsfiddle.net/X66L4/1/ попробуйте нарисовать несколько кругов, нажмите СОХРАНИТЬ, затем отредактируйте круги. переключившись на курсор в виде руки и снова СОХРАНИТЬ, чтобы увидеть изменения.

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

  var circles = [];

  google.maps.event.addDomListener(drawingManager, 'circlecomplete', 
    function(circle) {
      circles.push(circle);
    });

Причина сохранения всей ссылки на нарисованный объект состоит в том, чтобы продолжить отслеживание изменений. Поэтому вам понадобится массив и слушатель для каждого типа рисования.

Затем, когда вы захотите сохранить данные (вы можете делать это при каждом редактировании), выполните итерацию по массивам и извлеките минимальную информацию для их восстановления (центр, радиус, путь, широта и т. д.).

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
    <script type="text/javascript">
var myOptions = {
  center: new google.maps.LatLng(-25,177.5),
  zoom: 3,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};


    var map;

    function initialize() {
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.CIRCLE,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
      },
      circleOptions: {
        editable: true
      }
    });

      drawingManager.setMap(map);
      var circles = [];

      google.maps.event.addDomListener(drawingManager, 'circlecomplete', function(circle) {
        circles.push(circle);
      });

      google.maps.event.addDomListener(savebutton, 'click', function() {
        document.getElementById("savedata").value = "";
        for (var i = 0; i < circles.length; i++) {
          var circleCenter = circles[i].getCenter();
          var circleRadius = circles[i].getRadius();
          document.getElementById("savedata").value += "circle((";
          document.getElementById("savedata").value += 
            circleCenter.lat().toFixed(3) + "," + circleCenter.lng().toFixed(3);
          document.getElementById("savedata").value += "), ";
          document.getElementById("savedata").value += circleRadius.toFixed(3) + ")\n";

        }
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <button id="savebutton">SAVE</button>
    <textarea id="savedata" rows="8" cols="40"></textarea>
    <div id="map_canvas"></div>
  </body>
</html>
person Tina CG Hoehr    schedule 01.06.2012
comment
Да, у меня есть идея создать каждый элемент один за другим, поэтому вам решать, как организовать JSON/XML. Я просто подумал, что когда вы загружаете данные, каждый элемент должен быть доступен для редактирования, как и раньше. - person Tina CG Hoehr; 02.06.2012
comment
да, на самом деле у меня уже есть класс C#, который генерирует файл KML, соединяя набор точек местоположения. Я сделаю еще один способ создания KML из этих объектов. И большое спасибо за вашу помощь - person mohd khanfer; 02.06.2012
comment
вы взяли простой пример, взяв круг. Пожалуйста, дайте нам знать, взяв правильный POLYGON - person Jitendra Pancholi; 14.07.2015

arrow_upward
4
arrow_downward

По моему опыту, легче использовать dataLayer карты, чем диспетчер рисования. Попробуйте эту скрипку.

FiddleLink

Показ элементов управления:

map.data.setControls(['Polygon']);
map.data.setStyle({
    editable: true,
    draggable: true
});

в этой функции вы можете увидеть Create, Read (localStorage) и Remove (не в таком порядке):

function loadPolygons(map) {
var data = JSON.parse(localStorage.getItem('geoData'));

map.data.forEach(function (f) {
    map.data.remove(f);
});
console.log(data);
map.data.addGeoJson(data)
}
person Rui Silva    schedule 25.10.2016
comment
Ты восхитителен! Это намного проще! - person Miguel Laborde; 06.02.2017
comment
Недостатком этого подхода является то, что вы ограничены рисованием, используя «Многоугольник», «Точка», «Строка линии», а не круги и прямоугольники из библиотеки Диспетчера рисунков. Слой map.data карт Google не поддерживает рисование круга и прямоугольника. - person Aman Mohammed; 03.08.2018
comment
Вы совершенно правы. Но я думаю, что вопрос не распространялся по кругу. Это всего лишь простой способ приблизиться к простейшему решению с моей точки зрения. - person Rui Silva; 03.08.2018