Come ottenere l’indirizzo formattato da un indicatore trascinato in Google Maps Maps

Ho creato una mappa di Google che ti consente di inserire un indirizzo in un campo di testo. Quindi ti indirizza all’indirizzo che hai inserito nel campo di testo e lascia un indicatore trascinabile che quando viene trascinato mostra Lat e Long e L’indirizzo geolocalizzato.

Io invece di visualizzare l’indirizzo sopra, vorrei quando trascini l’indicatore per visualizzare nell’angolo in basso l’indirizzo dell’indicatore e l’indirizzo non inserito dal campo di testo.

Ho provato un numero di metodi inutilmente. lonlat [0] .formatted_address era tra alcune delle cose che ho provato.

Ho ricevuto il mio riferimento da Google

Il mio codice è qui sotto:

        <a href="https://www.yocker.com/t/google-maps" title="Topics of Google Maps" target="_blank">Google Maps</a> JavaScript API v3 Example: Geocoding Simple    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 }); // Javascript// google.maps.event.addListener(marker, 'dragend', function(evt){ document.getElementById('current').innerHTML = '

    Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '

    '; }); google.maps.event.addListener(marker, 'dragstart', function(evt){ document.getElementById('current').innerHTML = '

    Currently dragging marker...

    '; }); google.maps.event.addListener(marker, 'dragend', function(evt){ document.getElementById('info').innerHTML = '

    Address: ' + results[0].formatted_address + '

    '; }); google.maps.event.addListener(marker, 'dragstart', function(evt){ document.getElementById('info').innerHTML = '

    Currently dragging marker...

    '; }); map.setCenter(marker.position); marker.setMap(map); } else { alert("Geocode was not successful for the following reason: " + status); } }); } #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%; }
    Nothing yet...
    Address:

    È necessario utilizzare il servizio di geocoding inverso (come dimostrato nell’esempio a cui si effettua il collegamento) per recuperare l’indirizzo formattato.

    Questo codice da questo esempio chiama il geocoder inverso e utilizza la risposta per visualizzare l’indirizzo_formattato che viene restituito da esso:

     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.'); } }); } 

    Questo è il listener dragend che lo chiama:

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

    Ecco un esempio di lavoro (mette l’indirizzo ricevuto dal geocoder inverso in infowindow)

    snippet di codice:

     var geocoder; var map; var marker; var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); } function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { marker.formatted_address = responses[0].formatted_address; } else { marker.formatted_address = 'Cannot determine address at this location.'; } infowindow.setContent(marker.formatted_address + "
    coordinates: " + marker.getPosition().toUrlValue(6)); infowindow.open(map, marker); }); } 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); if (marker) { marker.setMap(null); if (infowindow) infowindow.close(); } marker = new google.maps.Marker({ map: map, draggable: true, position: results[0].geometry.location }); google.maps.event.addListener(marker, 'dragend', function() { geocodePosition(marker.getPosition()); }); google.maps.event.addListener(marker, 'click', function() { if (marker.formatted_address) { infowindow.setContent(marker.formatted_address + "
    coordinates: " + marker.getPosition().toUrlValue(6)); } else { infowindow.setContent(address + "
    coordinates: " + marker.getPosition().toUrlValue(6)); } infowindow.open(map, marker); }); google.maps.event.trigger(marker, 'click'); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } google.maps.event.addDomListener(window, "load", initialize);
     html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } @media print { html, body { height: auto; } #map_canvas { height: 650px; } }