Google Map API-Infowindow显示Google Place API信息

弗吉尼亚·诺曼

我不确定该怎么做。

我想要的是:如果您要访问https://www.google.com/maps并搜索农贸市场,我想显示您可能会找到的信息

我想要一个“信息”窗口,该窗口提供地址,营业时间以及Google Maps为此业务提供的其他信息。

我现在所拥有的:我有一个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中显示的Angular JS卡。但是我希望可以使用Google Map具有Google Places API的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>
乌兹

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

祝你有个好的一天!

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Google Map API-Infowindow显示Google Place API信息

来自分类Dev

在IOS中从Google Map Place API提取要求信息

来自分类Dev

Google Map Engine API中的信息窗口

来自分类Dev

显示信息窗口的Javascript Google Map API问题

来自分类Dev

Google Map API在信息窗口中显示标记位置

来自分类Dev

Google Place API在Android中显示错误

来自分类Dev

Google Map JS API版本3 InfoWindow的故障

来自分类Dev

解析Google Place API JSON

来自分类Dev

google place api图标列表

来自分类Dev

Google Maps API,显示InfoWindow时出现问题

来自分类Dev

Google Weave API信息

来自分类Dev

Google Map API-foreach循环中的信息窗口

来自分类Dev

显示Google Map onclick事件-Google Map API

来自分类Dev

Google Map API错误

来自分类Dev

Google Map Maker API?

来自分类Dev

Google Maps Api:infowindow与infobubble?

来自分类Dev

Google Maps api,选择infowindow?

来自分类Dev

Google Map群集不会分隔彼此靠近的标记,以使infoWindow显示信息

来自分类Dev

显示来自Google API Place Photo响应的图像

来自分类Dev

Google Place Autocomplete API下拉列表未显示在Modal中

来自分类Dev

在Google Place API中显示超过50公里的地方

来自分类Dev

Google Place API(地方搜索器)

来自分类Dev

使用Google Place API获取事件

来自分类Dev

如何获得评论数Google Place API?

来自分类Dev

Google Place Autocomplete API调用入门

来自分类Dev

google place搜寻api和“ Listing by”文字

来自分类Dev

google-place-api返回null json

来自分类Dev

google place搜寻api和“ Listing by”文字

来自分类Dev

Google Place API限制-非使用限制