地方名称在Google Places API中出错

时间:2017-03-10 19:01:01

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

我想知道地名,所以我所做的就是:首先在谷歌地图上点击我从Geocoder找到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>

当我运行此代码时,我得到的结果如下:

On google map click the info window showing correct name but from Places API i am getting wrong name

而不是获得名称(沃尔玛超级购物中心),而不是获得街道地址(5095 Almaden Expy)

1 个答案:

答案 0 :(得分:2)

如果您点击地图上的“图标”,您将获得IconMouseEvent(基本上是一个常规MouseEvent,并添加了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

代码段

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>