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

Ho creato una mappa di Google che 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.Come ottenere l'indirizzo formattato da un indicatore trascinato in Google Version Maps

Io invece di visualizzare l'indirizzo sopra, vorrei quando si trascina 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 ottenuto il mio riferimento dal Google

Il mio codice è qui sotto:

<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 

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

    google.maps.event.addListener(marker, 'dragend', function(evt){ 
    document.getElementById('info').innerHTML = '<p>Address: ' + results[0].formatted_address + '</p>'; 
    }); 

    google.maps.event.addListener(marker, 'dragstart', function(evt){ 
    document.getElementById('info').innerHTML = '<p>Currently dragging marker...</p>'; 
    }); 



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

    } 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 id="current" style="background-color:white;">Nothing yet...</div> 
<div id="info" style="background-color:white;">Address:</div> 
</div> 
</div> 


<div id="map_canvas"></div> 


</body> 
</html>

fonte

2012-10-10 Blake Loizides

È necessario utilizzare il servizio di geocodifica inversa (come dimostrato nell'esempio si collega a) per recuperare l'indirizzo formattato.

Questo codice che viene chiamato il geocoder inversa e utilizza la risposta per visualizzare il formatted_address 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 è l'ascoltatore dragend che chiama:

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

Here is a working example (puts the address received from the reverse geocoder in the 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 + "<br>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 + "<br>coordinates: " + marker.getPosition().toUrlValue(6)); 
 
     } else { 
 
      infowindow.setContent(address + "<br>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; 
 
    } 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div> 
 
    <input id="address" type="textbox" value="Sydney, NSW"> 
 
    <input type="button" value="Geocode" onclick="codeAddress()"> 
 
</div> 
 
<div id="map_canvas" style="height:90%;top:30px"></div>

fonte

2012-10-10 22:21:29 geocodezip

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

risposta

Problemi correlati