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

Question

我正在使用最新的 Google 地图 API v3 并尝试完成以下任务：

1. 当页面在移动设备上加载时，用户在地图上居中。我在下面的代码中有这个工作。

2. 用户可以在地图上单击/触摸 POI 并查看信息窗口。这也是有效的，因为它是谷歌地图的基本功能。

3. 我被难住了。我需要能够在第一个字段的信息窗口和第二个字段的 Place-ID 中使用 POI 的名称填充 2 个字段。

这是我目前发现的： https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder

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

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

此解决方案允许您单击并查看 Place-ID，但有两个主要问题。第一，来自上面第一个链接的相同 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 总是不同的解释，以及从点击事件中获取真实 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

希望对你有帮助！