在点击POI时获取google地图上的placeId

问题描述

我在我的网站上使用Google Maps JS V3 API。当用户搜索某个地方时，我可以通过placeId使用getDetails。我想在用户点击POI时也这样做。然而，我似乎无法找到一种方式来获得这个placeId当用户点击一个兴趣点，而不是使用搜索框。

我已经做了几天的研究，并没有找到任何关闭的运气。

我遇到了这个功能请求，我想知道是否真的没有办法通过点击获取placeId：

任何帮助表示感谢，谢谢！

解决方案

Google没有提供任何记载的API方法来通过点击POI来获取地点id。但是，我能够使用反向地理编码获取地点ID。

首先，我们可以通过

这是一个工作

  function initialize（）{var mapOptions = {zoom：14，center：new google.maps.LatLng（38.8862447，-77.02158380000003），mapTypeId：google.maps.MapTypeId.ROADMAP} ; map = new google.maps.Map（document.getElementById（'map_canvas'），mapOptions）; geocoder =新google.maps.Geocoder; //保留对原始setPosition函数的引用var fx = google.maps.InfoWindow.prototype.setPosition; //覆盖内置的setPosition方法google.maps.InfoWindow.prototype.setPosition = function（）{//这个属性没有记录，但是看起来//它只是为在POI上打开的InfoWindows定义if（this .logAsInternal）{google.maps.event.addListenerOnce（this，'map_changed'，function（）{var map = this.getMap（）; // infoWindow将被打开，通常在点击一个POI后， {//触发点击google.maps.event.trigger（map，'click'，{latLng：this.getPosition（）}）;}}）; } //调用原始setPosition-method fx.apply（this，arguments）; }; google.maps.event.addListener（map，'click'，function（e）{// alert（'clicked @'+ e.latLng.toString（））geocoder.geocode（{'location'：e.latLng}， function（results，status）{if（status === google.maps.GeocoderStatus.OK）{if（results [0]）{alert（'place id：'+ results [0] .place_id）;} else {console .log（'No results found'）;}} else {console.log（'Geocoder failed due to：'+ status）;}}）;}）;} google.maps.event.addDomListener（window，'load' ，initialize）;  

  html，body，＃map_canvas {margin ：0; 
 

 < div id = map_canvas>< / div>< script src =https://maps.googleapis.com/maps/api/js?callback=initializeasync defer>< / script>  

I'm using Google Maps JS V3 API on my website. I'm able to use getDetails by placeId when user searches for a place. I would like to do the same when user clicks on a POI. However, I can't seem to find a way to get this placeId when user clicks on a POI instead of using the search box.

I have done research for days, and had no luck of finding anything close.

I came across this feature request, I wonder if there is really no way of getting the placeId by POI clicking: https://code.google.com/p/gmaps-api-issues/issues/detail?id=8113&q=poi&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal

Any help is appreciated, thanks!

解决方案

Google doesnt provide any documented API method to get place id by clicking on a POI. However, I was able to get the place id using reverse geocoding.

First, we can get coordinates of POI by a method described in this Stack-overflow answer

Second, you can use the coordinates from getPosition() method to call the geocode method to retrieve address components and place id.

Here is a working JS Fiddle

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(38.8862447, -77.02158380000003),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  geocoder = new google.maps.Geocoder;

  //keep a reference to the original setPosition-function
  var fx = google.maps.InfoWindow.prototype.setPosition;

  //override the built-in setPosition-method
  google.maps.InfoWindow.prototype.setPosition = function() {

    //this property isn't documented, but as it seems
    //it's only defined for InfoWindows opened on POI's
    if (this.logAsInternal) {
      google.maps.event.addListenerOnce(this, 'map_changed', function() {
        var map = this.getMap();

        //the infoWindow will be opened, usually after a click on a POI
        if (map) {

          //trigger the click
          google.maps.event.trigger(map, 'click', {
            latLng: this.getPosition()
          });
        }
      });
    }
    //call the original setPosition-method
    fx.apply(this, arguments);
  };

  google.maps.event.addListener(map, 'click', function(e) {
    //alert('clicked @' + e.latLng.toString())
    geocoder.geocode({
      'location': e.latLng
    }, function(results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
        if (results[0]) {

          alert('place id: ' + results[0].place_id);


        } else {
          console.log('No results found');
        }
      } else {
        console.log('Geocoder failed due to: ' + status);
      }
    });

  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  margin: 0;
  height: 100%;
}

<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer></script>

这篇关于在点击POI时获取google地图上的placeId的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！