点击Google Maps API并获取地址。

Question

以下代码能够在单击时获取坐标。 但是，如何使用Google Maps API在地图上单击以获取地址、城市名称、区域名称或国家名称呢？

以下代码允许在单击时获取坐标。 但如何使用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>

- Basj

---

将 event.latLng 通过地理编码器传递可能是一个选项。 - putvande

可能是 如何从谷歌地图中的纬度和经度获取地址位置？ 的重复提问。 - Gokhan Kurt

Answer 1

您可以通过 Geocoder 将 event.latLng 传递来获取地址：

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

- putvande

---

谢谢@putvande！您是否知道如何自动显示地图中心的城市名称，每次我们在地图上改变位置（即平移/缩放）时，在<div>中显示？ - Basj

抱歉，我并不知道怎么做。可以在stackoverflow上搜索可能有答案。 - putvande

你可以使用infowindow，然后在其中放置<div>，请看我的答案。 - Ma Yubo

Answer 2

通过 Google API 只使用经纬度无法获取唯一结果，但是您可以在半径范围内搜索经纬度和关键词以获取一些结果。

获取特定地点信息的唯一方法是通过其 placeID 进行搜索。

    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/

- Ma Yubo

---

你能否按城市而非食品进行搜索？ - putvande

在回调函数中，要小心结果参数，它可能包含大量结果。在最后一部分，您可以使用单个结果查找更多信息 https://developers.google.com/maps/documentation/javascript/3.exp/reference#PlaceResult - Ma Yubo

@MaYubo，你能否发布一个实时演示以供日后参考（在这里使用jsfiddle或小部件）？ - Basj

Answer 3

 m is event =====>
 code here
 const latlng = {
lat: parseFloat(e.lat),
lng: parseFloat(e.lng),};

m.view.google.maps.Geocoder.prototype.geocode({ location: latlng },
function(results, status) {
if (status =='OK') {
  if (results[1]) {
    alert(results[1].formatted_address);
  }
}});

- vikash vishwakarma