web-dev-qa-db-fra.com

Cliquez sur Google Maps API et obtenez l'adresse.

Le code suivant permet d’obtenir les coordonnées, en cliquant sur ... .. Mais comment obtenir l’adresse ou le nom de la ville ou le nom de la région ou du pays en cliquant sur la carte, avec Google Maps API?

var myLatlng = new google.maps.LatLng(41.38,2.18);
var myOptions = { zoom: 13, center: myLatlng}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

google.maps.event.addListener(map, 'click', function(event) {alert(event.latLng);});
html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map-canvas"></div>

javascriptgoogle-mapsgoogle-maps-api-3
14
Basj

Vous pouvez passer le event.latLng par le géocodeur pour obtenir l'adresse:

var myLatlng = new google.maps.LatLng(41.38, 2.18);
var myOptions = {
  zoom: 13,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var geocoder = new google.maps.Geocoder();

google.maps.event.addListener(map, 'click', function(event) {
  geocoder.geocode({
    'latLng': event.latLng
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        alert(results[0].formatted_address);
      }
    }
  });
});

Fiddle

27
putvande

vous ne pouvez pas obtenir un seul résultat uniquement par lat, lng à partir de google api, mais vous pouvez obtenir des résultats par recherche lat, lng et un mot clé dans un rayon.

le seul moyen d'obtenir des informations de lieu spécifiques dont vous avez besoin, par son lieuID

    var myLatlng = new google.maps.LatLng(41.38,2.18);
var myOptions = { zoom: 13, center: myLatlng}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var infoWindow;
var service;
google.maps.event.addListener(map, 'click', function(event) {
    service = new google.maps.places.PlacesService(map);
    infoWindow = new google.maps.InfoWindow();
    var request = {
        location: event.latLng,
        keyword: 'food',
        radius:500
    };
    service.radarSearch(request, callback);

});
function callback(results, status) {
    if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error(status);
        return;
    }
    for (var i = 0, result; result = results[i]; i++) {
        addMarker(result);
    }
}

function addMarker(place) {
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: {
            url: 'http://maps.gstatic.com/mapfiles/circle.png',
            anchor: new google.maps.Point(10, 10),
            scaledSize: new google.maps.Size(10, 17)
        }
    });

    google.maps.event.addListener(marker, 'click', function() {
        service.getDetails(place, function(result, status) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
                console.error(status);
                return;
            }
            infoWindow.setContent(result.name+"<br>"+result.formatted_address+"<br>"+result.formatted_phone_number);
            infoWindow.open(map, marker);
        });
    });
}

https://jsfiddle.net/3qeop8ud/2/

0
Ma Yubo