Uzyskujesz współrzędne z zdarzenia kliknięcia lub przeciągnięcia w interfejsie API Map Google?

Zrobiłem Geokoder Google w wersji 3, chcę mieć możliwość pobrania współrzędnych znacznika, gdy jest on przeciągany lub klikany. Poniżej mój kod:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}


function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: results[0].geometry.location

    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
}
</script>

<style type="text/css">
#controls {
position: absolute;
bottom: 1em;
left: 100px;
width: 400px;
z-index: 20000;
padding: 0 0.5em 0.5em 0.5em;
}
 html, body, #map_canvas {
            margin: 0;
            width: 100%;
            height: 100%;
        }
</style>
</head>
<body onload="initialize()">
<div id="controls">
<input id="address" type="textbox" value="Sydney, NSW">

<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas"></div>
</body>
</html>

Próbowałem użyć następującego kodu, aby to zrobić, ale wydaje się, że nie działa.

       // Javascript//
       google.maps.event.addListener(marker, '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(marker, 'dragstart', function(evt){
       document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
       });

 map.setCenter(marker.position);
 marker.setMap(map);

 //HTML//
 <div id='map_canvas'></div>
 <div id="current">Nothing yet...</div>

google-maps-api html Blake Loizides
źródło

Coś w rodzaju tego, co próbujesz zrobić, ale w ramach funkcji obsługi zdarzeń możesz użyć evt.latLngdo przechwycenia współrzędnych

Roy

Hej, Roy, chcę wprowadzić adres, a następnie uzyskać współrzędne w wyskakującym okienku, tak jak w moim przykładzie. W moim przykładzie możesz przejść do adresu za pomocą wprowadzania tekstu, a następnie przeciągnąć punkt, chcę wyskoczyć współrzędne podczas przeciągania punktu. Poniższy przykład jest dobry, ale chcę wprowadzić adres? Czy mógłbyś mi pomóc?

Blake Loizides,

Przykład Mapperza wygląda całkiem nieźle. Od jakiegoś czasu nie korzystałem z GM API, możesz uzyskać szybszą odpowiedź na StackOverflow.

Roy

Szczegółowy blog: goo.gl/pDD6Q8

Suresh Kamrushi

Odpowiedzi:

Przygotowałem dla Ciebie prostą funkcję:

function markerCoords(markerobject){
    google.maps.event.addListener(markerobject, 'dragend', function(evt){
        infoWindow.setOptions({
            content: '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'
        });
        infoWindow.open(map, markerobject);
    });

    google.maps.event.addListener(markerobject, 'drag', function(evt){
        console.log("marker is being dragged");
    });     
}

I wstaw markerCoords (marker); pod deklaracją znacznika!

EZMapdesign
źródło

Przeciągnij znacznik i geokoder za pomocą współrzędnych

wprowadź opis zdjęcia tutaj

https://gmaps-samples-v3.googlecode.com/svn-history/r49/trunk/draggable-markers/draggable-markers.html

Cały kod:

    <html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(-34.397, 150.644);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Point A',
    map: map,
    draggable: true
  });

  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });

  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  });
}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <style>
  #mapCanvas {
    width: 500px;
    height: 400px;
    float: left;
  }
  #infoPanel {
    float: left;
    margin-left: 10px;
  }
  #infoPanel div {
    margin-bottom: 5px;
  }
  </style>

  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <b>Marker status:</b>
    <div id="markerStatus"><i>Click and drag the marker.</i></div>
    <b>Current position:</b>
    <div id="info"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
  </div>
</body>
</html>

Mapperz
źródło

Powyższy link nie jest już ważny - inne przykłady można znaleźć na stronie developers.google.com/maps/documentation/javascript/tutorial

Alvin