Google Places API 中的地名出错答案

【问题标题】：Place name getting wrong in Google Places APIGoogle Places API 中的地名出错
【发布时间】：2017-03-10 19:01:00
【问题描述】：

我想找出地名，因此我所做的是：首先在谷歌地图上单击我从地理编码器中找到 place_id。现在我将 place_id 传递给 Places API 的函数 PlacesService。现在从那里我收到成功请求，它正在返回地点详细信息，但它的名称不是正确的名称。我得到的是街道的名称。

下面是我的代码：

<script>
    function initMap() {
        var myLatlng = new google.maps.LatLng(37.3132072, -121.9334579);
        var myOptions = {
            zoom: 10,
            center: myLatlng
        }
        var map = new google.maps.Map(document.getElementById("map"),
            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]) {
                                        getname(results[0].place_id);
                                    }

                                }
                            });
                });

        function getname(place_id) {
            var placesService = new google.maps.places.PlacesService(map);
            placesService.getDetails({
                placeId: place_id
            }, function(results, status) {
                alert("NAME: " + results.name);
            });
        }
    }
</script>

当我运行这段代码时，我得到的结果如下：

获取街道地址（5095 Almaden Expy）而不是获取名称（Walmart Supercenter）

【问题讨论】：

标签： javascript google-maps google-places-api google-geocoding-api google-places

【解决方案1】：

如果你点击地图上的“图标”，你会得到一个IconMouseEvent（基本上是一个普通的鼠标事件，加上一个placeId属性）。

将 placeId 用于请求而不是地理编码器的返回值。

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

proof of concept fiddle

代码 sn-p：

function initMap() {
  var myLatlng = new google.maps.LatLng(37.329343, -121.863077);
  var myOptions = {
    zoom: 15,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById("map"),
    myOptions);
  var geocoder = new google.maps.Geocoder();

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

                }
              });
        }
      });

  function getname(place_id) {
    var placesService = new google.maps.places.PlacesService(map);
    placesService.getDetails({
      placeId: place_id
    }, function(results, status) {
      alert("NAME: " + results.name);
    });
  }
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>

【讨论】：