Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Google Maps API (https://javascript.ru/forum/events/71592-google-maps-api.html)

JeeOpp 30.11.2017 02:36

Google Maps API
 
Всем привет, такой вопрос

есть скрипт

<script>
        function initMap() {
            var centerLatLng = new google.maps.LatLng(53.907761, 27.567160);

            var mapOptions = {
                center: centerLatLng, // Координаты центра мы берем из переменной centerLatLng
                zoom: 12               // Зум по умолчанию. Возможные значения от 0 до 21
            };
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            var marker = new google.maps.Marker({
                position: centerLatLng,
                map: map,
                draggable:true,
                title:"Drag me!"
            });
        }
        google.maps.event.addDomListener(window, "load", initMap);

    </script>


Есть код отправки данных на сервер:
<form action="Controller" method="post">
        <input type="hidden" name="method" value = "callTaxi">
        <input type="hidden" name="position" value="">
        <button type="submit">Заказать такси</button>
    </form>


как из скрипта вытащить позицию маркера и засунуть его в запрос?

Nexus 30.11.2017 10:21

JeeOpp, Может так?
<form action="Controller" method="post">
	<input type="hidden" name="method" value = "callTaxi">
	<input type="hidden" name="position" value="">
	<button type="submit">Заказать такси</button>
</form>
<script>
	var centerLatLng=[53.907761, 27.567160];
	document.querySelector('input[name="position"]').value=centerLatLng.join(',');
	function initMap() {
		var centerLatLng = new google.maps.LatLng(centerLatLng.join(', '));

		var mapOptions = {
			center: centerLatLng, // Координаты центра мы берем из переменной centerLatLng
			zoom: 12               // Зум по умолчанию. Возможные значения от 0 до 21
		};
		var map = new google.maps.Map(document.getElementById("map"), mapOptions);

		var marker = new google.maps.Marker({
			position: centerLatLng,
			map: map,
			draggable:true,
			title:"Drag me!"
		});
	}
	google.maps.event.addDomListener(window, "load", initMap);

</script>

laimas 30.11.2017 10:26

Nexus,
но если в скрипте явно указывается значение переменной, то зачем же так напрягаться, их можно сразу таким же образом в форме прописать так ведь? Другой вопрос, это выбор координат пользователем и этот выбор в форму, но данного в коде не наблюдается и вопросом не оговаривается. )

Nexus 30.11.2017 10:37

laimas,
Цитата:

Сообщение от laimas
но если в скрипте явно указывается значение переменной, то зачем же так напрягаться, их можно сразу таким же образом в форме прописать так ведь?

Риторический вопрос?)

laimas 30.11.2017 10:49

Цитата:

Сообщение от Nexus
Риторический вопрос?

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

Nexus 30.11.2017 10:59

Цитата:

Сообщение от laimas
Другой вопрос, это выбор координат пользователем и этот выбор в форму, но данного в коде не наблюдается и вопросом не оговаривается. )

Таки нет, в переменную "marker" записывается созданный экземпляр маркера, этот экземпляр сразу размещается на карте, если в опциях передано свойство "map".

laimas 30.11.2017 11:07

var centerLatLng = new google.maps.LatLng(53.907761, 27.567160);

Это вы отправляете на сервер, а оно прописано явно, что не мешает сделать тоже самое и в форме. Что там далее происходит не важно. Если сервер задает координаты, размещая карту, то тем более серверу ничего не нужно, он и так знает. Разве это не странно?

Nexus 30.11.2017 11:27

laimas, обратите внимание на параметры маркера, его можно перемещать)

laimas 30.11.2017 11:55

Цитата:

Сообщение от Nexus
обратите внимание на параметры маркера, его можно перемещать

Ну так за этим и нужно следить и установленные координаты передавать в форму, где это? )

Nexus 30.11.2017 12:16

laimas, стыдно признавать, но я не смог найти адекватной документации к api google maps.
Вероятно на маркер можно повесить обработчик события "drag", но как получить координаты центра маркера...
У api yandex maps доки куда приличнее, даже не ожидал такого.

Nexus 30.11.2017 12:30

Нашел ответ на stackoverflow.
<form action="Controller" method="post">
	<input type="hidden" name="method" value = "callTaxi">
	<input type="hidden" name="position" value="">
	<button type="submit">Заказать такси</button>
</form>
<script>
	function initMap() {
		var centerLatLng = new google.maps.LatLng(53.907761, 27.567160);

		var mapOptions = {
			center: centerLatLng, // Координаты центра мы берем из переменной centerLatLng
			zoom: 12               // Зум по умолчанию. Возможные значения от 0 до 21
		};
		var map = new google.maps.Map(document.getElementById("map"), mapOptions);

		var marker = new google.maps.Marker({
			position: centerLatLng,
			map: map,
			draggable:true,
			title:"Drag me!"
		}),
			dragHandler=function(e){
				document.querySelector('input[name="position"]').value=[e.latLng.lat(),e.latLng.lng()].join(',');
			};
		
		marker.addListener('drag',dragHandler);
		marker.addListener('dragend',dragHandler);
	}
	google.maps.event.addDomListener(window, "load", initMap);
</script>

laimas 30.11.2017 12:56

А не проще value = e.latLng.lat() + "," + e.latLng.lng() ? )

JeeOpp 30.11.2017 13:45

Цитата:

Сообщение от Nexus (Сообщение 471656)
Нашел ответ на stackoverflow.
<form action="Controller" method="post">
	<input type="hidden" name="method" value = "callTaxi">
	<input type="hidden" name="position" value="">
	<button type="submit">Заказать такси</button>
</form>
<script>
	function initMap() {
		var centerLatLng = new google.maps.LatLng(53.907761, 27.567160);

		var mapOptions = {
			center: centerLatLng, // Координаты центра мы берем из переменной centerLatLng
			zoom: 12               // Зум по умолчанию. Возможные значения от 0 до 21
		};
		var map = new google.maps.Map(document.getElementById("map"), mapOptions);

		var marker = new google.maps.Marker({
			position: centerLatLng,
			map: map,
			draggable:true,
			title:"Drag me!"
		}),
			dragHandler=function(e){
				document.querySelector('input[name="position"]').value=[e.latLng.lat(),e.latLng.lng()].join(',');
			};
		
		marker.addListener('drag',dragHandler);
		marker.addListener('dragend',dragHandler);
	}
	google.maps.event.addDomListener(window, "load", initMap);
</script>

ага, надо было пояснить что я хотел, однако тут и без меня разобрались

я хотел чтобы когда пользователь открывает страницу с картой, он мог двигать создавшийся там маркер, и при нажатии кнопки
<form action="Controller" method="post">
	<input type="hidden" name="method" value = "callTaxi">
	<input type="hidden" name="position" value="">
	<button type="submit">Заказать такси</button>
</form>

на сервер отправлялся бы запрос с текущими координатами маркера,,

однако в атрибут value нужно как-то всунуть переменную из скрипта
<input type="hidden" name="position" value="">

или же есть возможность как-то в скрипте засунуть переменную в request?

Nexus 30.11.2017 13:51

JeeOpp, обратите внимание на 23 строку.

JeeOpp 30.11.2017 14:42

для потомков
<form action="Controller" method="post">
        <input type="hidden" name="method" value = "callTaxi">
        <input type="hidden" name="position">
        <button type="submit">Заказать такси</button>
</form>

аттрибут value в Position перезаписывал координаты на пробел, я его убрал.

И если маркер не трогать, то передаст на сервер пусто(не null)
Всем спасибо!


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