javascript - jQuery每个if值是否存在,追加到前一个值

我有在Google地图中呈现的事件和场所的列表。 see fiddle

    var mylatlongs = [
                        {"confid":"1","venueid":"1","date":"2014-09-09","venue":"Venue 1","name":"Conference 1","lat":"34.042435","lng":"-118.266586"},
                        {"confid":"2","venueid":"2","date":"2014-10-10","venue":"Venue 2","name":"Conference 2","lat":"34.052778","lng":"-118.255833"},
                        {"confid":"3","venueid":"3","date":"2014-11-11","venue":"Venue 3","name":"Conference 3","lat":"34.050592","lng":"-118.242663"},
                        {"confid":"4","venueid":"1","date":"2014-12-12","venue":"Venue 1","name":"Conference 4","lat":"34.042435","lng":"-118.266586"}
                    ];
    var infowindow = null;
    jQuery(function() {
            var StartLatLng = new google.maps.LatLng(mylatlongs[0]['lat'], mylatlongs[0]['lng']);
            var mapOptions = {
                center: StartLatLng,
                streetViewControl: false,
                panControl: false,
                maxZoom:17,
                zoom : 14,
                zoomControl:true,
                zoomControlOptions: {
                    style:google.maps.ZoomControlStyle.SMALL
                }
            };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

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

        jQuery.each( mylatlongs, function(i, m) {
            var StartLatLng = new google.maps.LatLng(30.984298 , -91.962333);
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(m.lat, m.lng),
                bounds: true,
                id : 'mk_' + m.confid,
                letter : m.index,
                map: map,
                title: m.name
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.close();
                infowindow.setContent(contentString);
                infowindow.open(map,marker);
            });

            var desc = m.date + " -- " + m.name;
            /*
            if (venueid already exists) {
            keep the one pin for the venue and append each name and date into the description seperated by a <br>
            }
            */

            var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+ m.venue + '</h1>'+
              '<div id="bodyContent">' + desc + '</div>'+
              '</div>';

        });
    });


除非一个地点有多个活动,否则此方法效果很好。
我研究了clustering和Spiderfier,它们提供了将大头针分成多个大头针的选项,但是我想做的是在contentString中将每个事件添加到一个地点。

所以用我的示例数据
弹出描述应具有以下内容。

    <h1 id="firstHeading" class="firstHeading">Venue 1</h1>
    <div id="bodyContent">
            2014-09-09 -- Conference 1 <br>
            2014-12-12 -- Conference 4
    </div>

    <h1 id="firstHeading" class="firstHeading">Venue 2</h1>
    <div id="bodyContent">
            2014-10-10 -- Conference 2
    </div>

    <h1 id="firstHeading" class="firstHeading">Venue 3</h1>
    <div id="bodyContent">
            2014-11-11 -- Conference 3
    </div>


目前,它有两个彼此叠置的图钉,单击时会得到最后渲染的图钉(最新事件)。

有没有一种方法可以在每个js中做到这一点,或者mylatlongs中的数据结构是否需要更改。

最佳答案

可能的方法:


创建一个存储标记的对象:

   var markers={};

当您将标记存储在该对象中时,请使用场所标识作为属性名称,并将所需的属性存储为标记属性,对于descs,请使用数组:

 //inside loop:

   //when there isn't a marker for the venue
   //create the marker
   if(!markers[m.venueid]){
        //create the marker    
        markers[m.venueid]=new google.maps.Marker({
            position: new google.maps.LatLng(m.lat, m.lng),
            bounds: true,
            id : 'mk_' + m.confid,
            letter : m.index,
            map: map,
            title: m.name,
            venue:m.venue,
            descs:[]
        });
        google.maps.event.addListener(markers[m.venueid], 'click', function() {
            infowindow.close();
            infowindow.setContent('<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">'+this.venue + '</h1>'+
          '<div id="bodyContent">' + this.descs.join('<br/>') + '</div>'+
          '</div>');
            infowindow.open(map,this);
        });
      }

将desc推到标记的 descs属性:

 markers[m.venueid].descs.push(m.date + " -- " + m.name)



结果: http://jsfiddle.net/rf48gvz5/8/