谷歌地图API - Infowindow显示谷歌地方API信息

时间:2015-03-21 04:59:22

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

我不知道该如何解决这个问题。

我想要的: 我想显示您可能会找到的信息,如果您要前往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]
];

然后我用Infowindow显示农贸市场的名称。

我知道我可以在数据库中添加一个新表格数小时和其他信息,并使用它创建一个我可以在Infowindow中显示的Angular JS卡...但是我希望有一种方法可以使用带有Google Places API的Google Map 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>

1 个答案:

答案 0 :(得分:1)

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

有一个好的!

以下是他们的完整getDetails()手册:

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