드래그 가능한 마커가있는 Google지도지도를 만들었습니다. 사용자가 마커를 드래그 할 때 새로운 위도와 경도를 알아야하지만이를 수행하는 가장 좋은 방법이 무엇인지 이해할 수 없습니다.
새 좌표를 검색하려면 어떻게해야합니까?
답변:
다음은 JSFiddle 데모 입니다. Google Maps API V3에서는 드래그 가능한 마커의 위도와 경도를 추적하는 것이 매우 간단합니다. 다음 HTML 및 CSS를 기반으로 시작하겠습니다.
<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>
#map_canvas{
width: 400px;
height: 300px;
}
#current{
padding-top: 25px;
}
다음은 Google지도를 초기화하는 초기 JavaScript입니다. 드래그 할 마커를 만들고 드래그 가능한 속성을 true로 설정합니다. 물론로드하려면 창의 onload 이벤트에 연결해야하지만 코드로 건너 뛰겠습니다.
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 1,
center: new google.maps.LatLng(35.137879, -82.836914),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(47.651968, 9.478485),
draggable: true
});
여기 dragstart
에서 드래그 시작을 추적하고 dragend
마커가 드래그를 멈출 때 드랙 에 두 개의 이벤트 를 첨부합니다 google.maps.event.addListener
. 부착 방법은를 사용하는 것 입니다. 여기서 우리가하는 일은 current
마커가 드래그 될 때 div 의 콘텐츠를 설정하고 드래그가 멈출 때 마커의 lat 및 lng를 설정하는 것입니다. Google 마우스 이벤트에는 이벤트가 트리거 될 때 'google.maps.LatLng'개체를 반환하는 'latlng'속성 이름이 있습니다. 그래서 여기서 우리가하는 것은 기본적으로에서 반환되는이 리스너의 식별자 를 사용하고 드래그 엔드의 현재 위치를 추출하기 google.maps.event.addListener
위한 속성 latLng
을 가져 오는 것 입니다. 드래그가 멈출 때 Lat Lng를 얻으면 current
div 내에 표시됩니다 .
google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
마지막으로 마커를 중앙에 배치하고지도에 표시합니다.
map.setCenter(myMarker.position);
myMarker.setMap(map);
내 답변에 대해 궁금한 점이 있으면 알려주세요.
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
자세한 내용은 Google Maps API-LatLng 에서 확인할 수 있습니다.
marker
메서드를 호출하기 전에 어떻게 인스턴스화 합니까? 예를 들어 developers.google.com/maps/documentation/javascript/examples/…를 보고 있는데 검색이 완료되고 마커가 나타난 후 해당 마커의 위도 / 경도를 어떻게 얻습니까?
당신은 부를 수있는 getPosition()
온Marker
- 당신이 시도해야?
당신은 자바 스크립트 API의 사용되지 않는, v2에서 인 경우에, 당신은 호출 할 수 있습니다 getLatLng()
에GMarker
.
getPosition()
객체를 반환하므로 특히 위도 / 경도를 얻으려면 각각에서 lat()
and 를 호출해야 lng()
합니다.
이 시도
var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Set lat/lon values for this property',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
});
// show the marker position //
console.log( objMarker.position.lat() );
console.log( objMarker.position.lng() );
// create a new point based into marker position //
var deltaLat = 1.002;
var deltaLng = -1.003;
var objPoint = new google.maps.LatLng(
parseFloat( objMarker.position.lat() ) + deltaLat,
parseFloat( objMarker.position.lng() ) + deltaLng
);
// now center the map using the new point //
objMap.setCenter( objPoint );
마커에 리스너를 추가하고 drag 또는 dragend 이벤트를 수신하고이 이벤트를 수신 할 때 이벤트의 위치를 요청해야합니다.
마커에 의해 트리거되는 이벤트에 대한 설명은 http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker 를 참조하세요 . 이벤트 리스너를 추가 할 수있는 메소드 는 http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener 를 참조하세요 .
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(13.103, 80.274),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(18.103, 80.274),
draggable: true
});
google.maps.event.addListener(myMarker, 'dragend', function(evt) {
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt) {
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + position.coords.latitude + ' Current Lng: ' + position.coords.longitude + '</p>';
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
draggable: true
});
google.maps.event.addListener(myMarker, 'dragend', function(evt) {
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt) {
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
}
getLocation();
#map_canvas {
width: 980px;
height: 500px;
}
#current {
padding-top: 25px;
}
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<section>
<div id='map_canvas'></div>
<div id="current">
<p>Marker dropped: Current Lat:18.103 Current Lng:80.274</p>
</div>
</section>
</body>
</html>
이 질문에 대한 많은 답변이 있지만 나에게는 효과가 없었습니다 (마커 객체에 사용할 수있는 방법이 아닌 getPosition () 제안 포함). 지도 V3에서 나를 위해 일한 유일한 방법은 (간단히) 다음과 같습니다.
var lat = marker.lat();
var long = marker.lng();
marker.position.lat()
과marker.position.lng()
marker.getPosition().lat()
하고marker.getPosition().lng()