Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2018, 18:19
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 259

Отловить событие перемещения маркера
Добрый день. Есть код для добавления маркера на карту 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.
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2018, 18:34
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,450

Янковиц,
Сообщение от Янковиц
Подскажите, как это сделать на перемещение вновь созданных маркеров, так и для существующих, выводимых через markersData
Точно так же и там же, где вы создаете для этих маркеров обработчики на событие click
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2018, 19:09
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 259

Вы имеете в виду следом за 58 строки или в цикле?
Ответить с цитированием
  #4 (permalink)  
Старый 20.07.2018, 10:18
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,450

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


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

Последний раз редактировалось Dilettante_Pro, 20.07.2018 в 10:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помгите отловить событие Maxxxim Events/DOM/Window 1 27.11.2015 11:29
Как отловить событие в contenteditable? D_Pavel Events/DOM/Window 10 21.01.2014 14:08
Как отловить событие "Enter" в jQuery UI (Menu) ? saturn jQuery 3 10.10.2012 22:15
Отловить событие simple Events/DOM/Window 3 11.05.2011 13:20
Отловить событие изменения элемента pavl Events/DOM/Window 13 13.04.2009 13:00