web-dev-qa-db-ja.com

Googleマーカーから緯度/経度を取得する

ドラッグ可能なマーカーを使用してGoogleマップの地図を作成しました。ユーザーがマーカーをドラッグするとき、新しい緯度と経度を知る必要がありますが、それを行うための最良のアプローチが何であるか理解できません。

新しい座標を取得するにはどうすればよいですか？

javascriptgoogle-mapsgoogle-maps-markers
87
Genadinik

JSFiddle Demo です。 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は次のとおりです。ドラッグするマーカーを作成し、そのdraggableプロパティを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
});

ここでは、ドラッグの開始を追跡する2つのイベントdragstartと、マーカーのドラッグが停止したときにドラックするdragendをアタッチします。アタッチする方法は、google.maps.event.addListenerを使用することですここで行っているのは、マーカーがドラッグされるときにdiv currentのコンテンツを設定し、ドラッグが停止するときにマーカーの緯度と経度を設定することです。 Googleマウスイベントのプロパティ名は「latlng」で、イベントがトリガーされると「google.maps.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);

私の答えに関して何か質問があれば教えてください。

122
KJYe.Name

getPosition()をMarker で呼び出すことができます-あなたはそれを試しましたか？

非推奨のJavaScript API v2を使用している場合は、 getLatLng() ON GMarker を呼び出すことができます。

28
no.good.at.coding
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

詳細については、 Google Maps API-LatLng をご覧ください。

26
José David Bedoya

これを試して

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();
});
18
Rolwin C
// 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 );
6
Thiago Mata
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>
1
Manikandan Ece

マーカーにリスナーを追加し、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 を参照してください。

1
JB Nizet