He hecho un mapa de Google que permite la entrada de una dirección en un campo de texto. Luego se desplaza a la dirección que has introducido en el campo de texto y hojas de la posibilidad de arrastrar un marcador que cuando se arrastró muestra la Lat y Long, y El Geolocalizadas Dirección.

Yo en lugar de mostrar la dirección de arriba, sería como cuando arrastre el marcador de la pantalla en la esquina inferior izquierda de la Dirección del Marcador y el no ingresado de las direcciones del campo de texto.

He intentado un número de métodos fue en vano. lonlat[0].formatted_address fue entre algunas de las cosas que he probado.

Tengo mi referencia de Google

Mi código es el siguiente:

<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>

1 Comentario

  1. 41

    Que usted necesita para utilizar el servicio de geocodificación inversa (como se demuestra en el ejemplo de enlace a) para recuperar el formato de dirección.

    Este código de ejemplo que llama a la inversa geocoder y utiliza la respuesta a mostrar el formatted_address que es devuelto por ella:

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

    Este es el dragend oyente que llama:

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

    Aquí es un ejemplo de trabajo (pone la dirección recibido desde el reverso de geocoder en el infowindow)

    fragmento de código:

    JS:

    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);

    CSS:

    html,
    body {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    #map_canvas {
    height: 100%;
    }
    @media print {
    html,
    body {
    height: auto;
    }
    #map_canvas {
    height: 650px;
    }
    }

    HTML:

    <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>

Dejar respuesta

Please enter your comment!
Please enter your name here