Google Maps API - 显示具有相同纬度/经度的所有标记的信息答案

【问题标题】：Google Maps API - Display info for all markers with same lat/longGoogle Maps API - 显示具有相同纬度/经度的所有标记的信息
【发布时间】：2012-04-05 08:35:25
【问题描述】：

我正在使用来自 Songkick.com 的 API 的数据在谷歌地图上绘制一些音乐会地点。我正在使用 jQuery 调用数据。映射音乐会时，如果单个场地安排了多个音乐会，则所有标记都放置在完全相同的位置。这意味着只有最近一场音乐会的标记是可见的，而谷歌地图信息窗口只显示最近一场音乐会的数据。

我想让所有在完全相同的纬度/经度上举行的音乐会都在 infoWindow 中显示他们的信息。因此，当您单击标记时，所有预定的节目都会显示在 infoWindow 中，而不仅仅是最近的节目。

这是我的 javascript 的一部分：

function doSearch(locations) {
deleteOverlays();
jQuery.getJSON("http://api.songkick.com/api/3.0/search/locations.json?query=" + locations + "&apikey=XXXXXXXX&jsoncallback=?", function(data){
    var id = data.resultsPage.results.location[0].metroArea.id;

    jQuery.getJSON("http://api.songkick.com/api/3.0/metro_areas/" + id + "/calendar.json?apikey=XXXXXXXX&jsoncallback=?", function(data){
        var bounds = new google.maps.LatLngBounds();
        var point;
        $.each(data.resultsPage.results.event, function(i, item) {
            var event = item;
            point  = new google.maps.LatLng(
                parseFloat(item.location.lat),
                parseFloat(item.location.lng));
            var marker = new google.maps.Marker({
                map      : map,
                animation: google.maps.Animation.DROP,
                position : point

            });

            markersArray.push(marker);

            var contentString = '<p><b>' + item.displayName + '</b></p>' + '<p>' + item.location.city + '</p>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

google.maps.event.addListener(marker, 'click', function() {

                if (currentInfoWindow != null) { 
                    currentInfoWindow.close(); 
                } 
                infowindow.open(map, marker); 
                currentInfoWindow = infowindow;
            });

为了查看此应用程序的实际运行情况，我建立了一个临时网站。

http://129.219.78.186/~masgis/tward/songkick/Metro.html

要查看我在说什么，请输入主要城市的名称，然后单击掉落的标记。只会显示最近的音乐会。

提前致谢，非常感谢任何帮助。

【问题讨论】：

标签： javascript jquery json google-maps infowindow

【解决方案1】：

看起来 SongKick API 调用为每个场地返回了一个唯一的 ID。所以你可以这样做：

将每个事件对象添加到数组中。
从数组中的事件中提取唯一的场地 ID。
循环遍历每个唯一的场地 ID，提取具有该场地 ID 的每个事件，并通过循环访问此事件子集来构建信息窗口字符串。
使用场地信息构建标记，将信息窗口字符串设置为标记。

这是一些 JavaScript 代码、嵌套循环和一些性能损失，但它应该可以解决问题。

【讨论】：