Google maps api 3 是否可以使用谷歌地图API从poi获取和显示详细信息？_Google Maps Api 3

Google maps api 3 是否可以使用谷歌地图API从poi获取和显示详细信息？

google-maps-api-3

Google maps api 3 是否可以使用谷歌地图API从poi获取和显示详细信息？,google-maps-api-3,Google Maps Api 3,是否可以直接在地图（图1）中获取并显示详细信息（来自图2），而无需用户单击链接并打开新页面是的，您可以向google.maps.Map（）对象添加一个“单击”侦听器，以侦听对POI的单击。如果单击了一个，则可以通过调用event.stop（）来抑制默认行为。单击的结果将是lat/lng和地点ID 然后，您可以使用从该地点ID获取详细信息，该ID包含maps.google.com地点页面上的大部分信息。此信息可用于在google.maps.InfoWindow（）中显示这是一本书。请注意，I

是否可以直接在地图（图1）中获取并显示详细信息（来自图2），而无需用户单击链接并打开新页面

是的，您可以向

google.maps.Map（）

对象添加一个“单击”侦听器，以侦听对POI的单击。如果单击了一个，则可以通过调用

event.stop（）

来抑制默认行为。单击的结果将是lat/lng和地点ID

然后，您可以使用从该地点ID获取详细信息，该ID包含maps.google.com地点页面上的大部分信息。此信息可用于在

google.maps.InfoWindow（）中显示
这是一本书。请注意，InfoWindow非常简单且未格式化，一些详细信息并不总是出现在PlacesResult对象中，但是通过一些漂亮的CSS和数据检查，您可以创建一个非常丰富和详细的InfoWindow
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 37.421959, lng: -122.084269},
          zoom: 14
        });

        var placesService = new google.maps.places.PlacesService(map);

        map.addListener('click', function(event) {
            if (event.placeId) {
              event.stop();
              placesService.getDetails({placeId: event.placeId}, function(place, status) {
                  var content = '<div>'+
                    '<div >'+
                    '</div>'+
                    '<h1 class="firstHeading">' + place.name + '</h1>'+
                    '<div">'+
                    '<p>' + place.formatted_address + '</p>'+
                    '<p>' + place.formatted_phone_number + '</p>'+
                    '<p><a href="' + place.website + '">' + place.website + '</a></p>';
                    for (var i = 0; i < place.photos.length; i++) {
                      content += '<img src="' + place.photos[i].getUrl({maxHeight: 50}) + '">';
                    }
                    content += '</div></div>';

                  var infoWindow = new google.maps.InfoWindow({
                      maxWidth: 300,
                      content: content,
                      position: event.latLng
                  });
                  infoWindow.open(map);
              });
            }
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=places&key=YOUR_KEY"
    async defer></script>
  </body>
</html>


简单地图
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:37.421959，lng:-122.084269}，
缩放：14
});
var placesService=新的google.maps.places.placesService（map）；
map.addListener（'click'，函数（事件）{
if（event.placeId）{
事件停止（）；
placesService.getDetails（{placeId:event.placeId}，函数（place，status）{
变量内容=“”+
''+
''+
''+place.name+''的+
'