Google Map API - Infowindow 显示 google place API 信息答案

【问题标题】：Google Map API - Infowindow display google place API informationGoogle Map API - Infowindow 显示 google place API 信息
【发布时间】：2015-03-21 04:59:21
【问题描述】：

我不知道该怎么做。

我想要的：如果你去https://www.google.com/maps 搜索农贸市场，我想显示你可能会找到的信息。

我想要一个信息窗口，其中提供地址、营业时间以及 Google 地图为此商家提供的可能的其他信息。

我现在拥有的：我有一个 Angular JS 代码块，它填充了一个如下所示的数组：

var locations = [
  ['Findlay Market', 39.115398, -84.518481, 5],
  ['Hyde Park Farmers' Market', 39.139601, -84.442496, 4],
  ['Lettuce Eat Well Farmers' Market', 39.166134, -84.611613, 3],
  ['College Hill Farm Market', 39.195641, -84.545453, 2],
  ['Anderson Farmers' Market', 39.078364, -84.350539, 1]
];

然后我使用信息窗口显示农贸市场的名称。

我知道我可以在我的数据库中添加一个新表来保存几个小时和其他信息，并使用它来创建一个 Angular JS 卡，我可以在 Infowindow 中显示它......但我希望有一种方法可以使用Google Map API 和 Google Places API 来获取该信息，而不是将其存储在我的数据库中。

感谢 uksz，我能够使用下面的代码来帮助我获得所需的信息。

<!DOCTYPE html>
<html>
    <head>
    <title>Place details</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
    function initialize() {
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(39.115398, -84.518481),
    zoom: 15
});

var request = {
    location: map.getCenter(),
    radius: '500',
    query: 'Findlay Market'
};

var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);

function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        var marker = new google.maps.Marker({
            map: map,
            place: {
                placeId: results[1].place_id,
                location: results[1].geometry.location
            }
        });
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function() {
            var content = results[1].name + '<br>' + 
                          results[1].formatted_address + '<br>' +
                          results[1].opening_hours + '<br>' +
                          results[1].place_id + '<br>';
            infowindow.setContent(content);
            infowindow.open(map, this);
            });
        }
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

所以我不知道我是否正确理解了您的问题，但如果您只想显示来自 Google Places API 的信息，您可以使用他们的 getDetails() 函数。这将返回一个对象。如果您不想存储对象，为什么不在每次用户切换视图后删除对象？这样您就不会将此信息存储在您的数据库中，至少不会永久存储。

祝你好运！

这是他们完整的 getDetails() 手册：

https://developers.google.com/maps/documentation/javascript/places#place_details_requests

【讨论】：

谢谢，我能够使用它更好地找到解决方案。