Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Отловить событие перемещения маркера (https://javascript.ru/forum/dom-window/74545-otlovit-sobytie-peremeshheniya-markera.html)

Янковиц 19.07.2018 18:19

Отловить событие перемещения маркера
 
Добрый день. Есть код для добавления маркера на карту Google:
<script type="text/javascript">
var markersData = [
	{
		lat: 56.246205,
		lng: 43.8964165,
		name: "Название 1",
		address:"Адрес 1"
	},
	{
		lat: 56.2763807,
		lng: 43.94534,
		name: "Название 2",
		address:"Адрес 2"
	},
	{
		lat: 56.3144715,
		lng: 43.9922894,
		name: "Название 3",
		address:"Адрес 3"
	}
];

var map, infoWindow, marker;
 
function initMap() {
	var centerLatLng = new google.maps.LatLng(56.2928515, 43.7866641);
	var mapOptions = {
		center: centerLatLng,
		zoom: 6
	};

	map = new google.maps.Map(document.getElementById("google-map-box"), mapOptions);
 
	infoWindow = new google.maps.InfoWindow();
 
	google.maps.event.addListener(map, "click", function() {
		infoWindow.close();
	});
 
	// Определяем границы видимой области карты в соответствии с положением маркеров
	var bounds = new google.maps.LatLngBounds();
 
	for (var i = 0; i < markersData.length; i++){
 
		var latLng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
		var name = markersData[i].name;
		var address = markersData[i].address;
 
		initMarker(latLng, name, address);
 
		// Расширяем границы нашей видимой области, добавив координаты нашего текущего маркера
		bounds.extend(latLng);
	}
 
	// Автоматически масштабируем карту так, чтобы все маркеры были в видимой области карты
	map.fitBounds(bounds);
	
	google.maps.event.addListener(map, 'click', function(e) {
		addMarker(e);
	});
	
	
	var marker = new google.maps.Marker({
		map: map,
		draggable: true //разрешаем перемещение маркера
	});
	google.maps.event.addListener(markerObject, 'dragend', function(e) {
		editMarker(e);  // Координаты маркера
	});
 
}
google.maps.event.addDomListener(window, "load", initMap);

function addMarker(e) {
	var location = e.latLng;
	var infoWindow = new google.maps.InfoWindow({
		content: 'Latitude: ' + location.lat() + '<br />Longitude: ' + location.lng()
	});
	
	var marker = new google.maps.Marker({
		position: {lat: location.lat(), lng: location.lng()},
		map: map,
		draggable:true
	});
	google.maps.event.addListener(marker, "click", function() {
		var contentString = '<div class="infowindow">' +
								'<h3>Latitude' + location.lat() + '</h3>' +
								'<p>Longitude' + location.lng() + '</p>' +
							'</div>';
		infoWindow.setContent(contentString);
		infoWindow.setPosition(location);
		infoWindow.open(map, marker);
	});
	$('.google-map .google-map-marks').append('<div class="marker"><span class="latitude">'+location.lat()+'</span><span class="longitude">'+location.lng()+'</span><span class="delet"></span></div>');
	//$('<a>', { href: 'http://google.com', text: 'Гугли!'}).appendTo('.google-map .google-map-marks');
}

function editMarker(e) {
	var lat = e.getPosition().lat();
	var lng = e.getPosition().lng();
	alert(lat + ',' + lng); //выводим
}

function initMarker(latLng, name, address) {
	var marker = new google.maps.Marker({
		position: latLng,
		map: map,
		title: name,
		draggable:true
	});
	google.maps.event.addListener(marker, "click", function() {
		var contentString = '<div class="infowindow">' +
								'<h3>' + name + '</h3>' +
								'<p>' + address + '</p>' +
							'</div>';
		infoWindow.setContent(contentString);
		infoWindow.open(map, marker);
	});
}
</script>

Пытаюсь отловить событие перемещения маркера следующим образом:
google.maps.event.addListener(markerObject, 'dragend', function(e) {
		editMarker(e);  // Координаты маркера
	});

Однако, как и ожидалось выпадает ошибка undifined markerObject.
Подскажите, как это сделать на перемещение вновь созданных маркеров, так и для существующих, выводимых через markersData.

Dilettante_Pro 19.07.2018 18:34

Янковиц,
Цитата:

Сообщение от Янковиц
Подскажите, как это сделать на перемещение вновь созданных маркеров, так и для существующих, выводимых через markersData

Точно так же и там же, где вы создаете для этих маркеров обработчики на событие click

Янковиц 19.07.2018 19:09

Вы имеете в виду следом за 58 строки или в цикле?

Dilettante_Pro 20.07.2018 10:18

У вас в коде создаются маркеры и навешиваются на них обработчики кликов в функциях addMarker(e) и initMarker.
Вот там сразу за обработчиком кликов (или перед ним - неважно) разместите и обработчик
google.maps.event.addListener(marker, 'dragend', function(e) {
        editMarker(e);  // Координаты маркера
    });


Обратите внимание - marker, а не markerObject


Часовой пояс GMT +3, время: 09:48.