Google Maps API-显示所有纬度/经度相同的标记的信息 [英] Google Maps API - Display info for all markers with same lat/long

问题描述

我正在使用Songkick.com API的数据在Google地图上绘制一些音乐会地点.我正在使用jQuery调用数据.映射音乐会时，如果单个地点安排了多个音乐会，则所有标记都将放置在完全相同的位置.这意味着只有最新演唱会的标记可见，而Google Maps InfoWindow仅显示该最新演唱会的数据.

I am mapping some concert locations on google maps, using data from Songkick.com's API. I'm making a call to the data using jQuery. When mapping a concert, if a single venue has multiple concerts scheduled, all of the markers are placed in the exact same location. This means that only the marker of the most recent concert is visible, and the google maps infoWindow only displays the data for that most recent concert.

我想这样做，以便所有在同一纬度/经度举行的音乐会在infoWindow中显示其信息.因此，当您单击标记时，所有预定的节目都会显示在infoWindow中，而不仅仅是最近的节目.

I would like to make it so that all concerts taking place at that exact same lat/long display their info in the infoWindow. So when you click on the marker, all scheduled shows are displayed in the infoWindow, not just the most recent show.

这是我的javascript的一部分:

Here is part of my 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;
            });

要查看此应用程序的运行情况，我已经建立了一个临时网站.

To see this application in action, I have set up a temporary website.

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

要查看我在说什么，请输入主要城市的名称，然后单击放置的标记.只有最近的演唱会才会出现.

To see what I am talking about, type in the name of a major city, and click a marker that drops. Only the most recent concert will show up.

在此先感谢您的帮助.

推荐答案

SongKick API调用似乎为每个场所返回唯一的ID.所以这是你可以做的:

It looks like the SongKick API call returns a unique ID for each venue. So here's what you can do:

1. 将每个事件对象添加到数组中.
2. 从阵列中的事件中提取唯一的场所ID.
3. 浏览每个唯一的场所ID，提取具有该场所ID的每个事件，并通过循环这些事件子集来构建信息窗口字符串.
4. 使用场所信息构建标记，将信息窗口字符串设置为标记.

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

It's a bit of JavaScript code, nested loops, and a bit of a performance hit, but it should do the trick.

这篇关于Google Maps API-显示所有纬度/经度相同的标记的信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！