Question

我使用最新的Google地图API v3并尝试完成以下操作：

在移动设备上加载页面时，地图上的中心用户。我在下面的代码中有这个工作。
用户点击/触摸地图中的POI并查看信息窗口的功能。这也是谷歌地图的一个基本功能。
这是我被难倒的。我需要能够在第一个字段的信息窗口中填充带有POI名称的2个字段，在第二个字段中填充地点ID。

这是我迄今为止所发现的： https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder

此链接允许搜索地点，并且填充的标记会生成一个信息窗口，其中包含搜索位置的Place-ID。但是，如果您点击标记外的任何POI，则没有Place_ID。

另一个紧密的解决方案： Get placeId on google maps when POI is clicked

此解决方案允许您单击并查看Place-ID，但有两个主要问题。 1，来自上面第一个链接的相同POI为完全相同的位置产生与此解决方案不同的Place-ID。此外，无论POI是否在附近，它都会为地图上的任何点生成Place-ID。

到目前为止，这是我的代码：

 function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 17,
        streetViewControl: false,
        mapTypeControl: false
    });
    var infoWindow = new google.maps.InfoWindow({map: map});

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        map.setCenter(pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }

我非常感谢可以解释为什么这些方法之间的Place-ID总是不同的，以及从click事件中获取真正的Place-ID的可能解决方案。谢谢！

Answer 1

您可以在地图上收听点击事件。如果您点击POI图标，将会引发IconMouseEvent。

根据文件：

google.maps.IconMouseEvent对象规范

当用户点击地图上的图标时，会发送此对象。此地点的地点ID存储在placeId成员中。要防止显示默认信息窗口，请对此事件调用stop（）方法以防止它被传播。在Places API开发人员指南中了解有关地点ID的详情。

此对象扩展了MouseEvent。

请查看此示例代码，了解如何使用地点ID：

http://jsbin.com/parapex/10/edit?html,output

希望它有所帮助！

带有Place-Id的Google Map API文件字段

1 个答案: