Хобрук: Ваш путь к мастерству в программировании

Получить все точки полилинии, нарисованной на Картах Google -

Я работаю над Google Maps.

У меня есть ситуация, когда пользователь вводит путь на карте с помощью инструментов рисования. Мне нужно получить полный путь всех точек, когда пользователь перестанет рисовать линию.

Итак, у меня есть этот код в JavaScript:

  LoadDrawingToolsForDistance: function () {
        var drawingManager = new google.maps.drawing.DrawingManager({
            //drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                  google.maps.drawing.OverlayType.POLYLINE
                ]
            },
            circleOptions: {
                fillColor: '#ffff00',
                fillOpacity: 1,
                strokeWeight: 5,
                clickable: false,
                editable: true,
                zIndex: 1
            },

        });
        drawingManager.setMap(MapObject);

        google.maps.event.addListener(drawingManager, 'polylinecomplete', function (event) {
            debugger;
            alert('A');
        });
    }

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

Это представление параметра event в функции:

введите здесь описание изображения

google-maps javascript google-maps-api-3
09.08.2014

Ответы:


1

вы можете просто использовать событие overlaycomplete, чтобы сделать это.

<div id="map_canvas"></div>
  
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing">
</script>

<script type="text/javascript">

</script>

<style>
html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>
<script type="text/javascript">
  var map;
  function initialize() {
    var myOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-37.84232584933157, 145.008544921875),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

	 var drawingManager = new google.maps.drawing.DrawingManager({
		    
		    drawingControl: true,
		    drawingControlOptions: {
		      position: google.maps.ControlPosition.TOP_RIGHT,
		      drawingModes: [
                google.maps.drawing.OverlayType.POLYGON,
		        google.maps.drawing.OverlayType.POLYLINE
		      ]
		    },
	    polygonOptions: {
	    	strokeColor: '#75ad3e',
	        fillColor: '#75ad3e',
	        fillOpacity: 0.35,
	        strokeWeight: 2,
	        clickable: true,
	        editable: true,
	        draggable:true
	      }
	});
    	drawingManager.setMap(map);
    	
    	google.maps.event.addListener(drawingManager, 'overlaycomplete', function (OverlayCompleteEvent) {
    		var bounds = OverlayCompleteEvent.overlay.getPath().getArray();
    		console.log(bounds);
          alert(bounds.toString());

    		 });

    	}


  google.maps.event.addDomListener(window, 'load', initialize);
</script>

07.10.2015

2

Чтобы получить точки полилинии на карте, вы можете использовать это

google.maps.event.addListener(drawingManager, 'polylinecomplete', function (event) {
   console.log(event.getPath().getArray());
});

Это распечатает все точки полилинии.

09.08.2014
Новые материалы
Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
Как настроить Selenium в проекте Angular
Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
Аргументы прогрессивного улучшения почти всегда упускают суть
В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
Введение в Джанго Фреймворк
Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
стройный-i18следующий
Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..