javascript - jquery 每个如果值存在则追加到前一个值

Question

我有一个事件和 field 列表，正在谷歌地图中呈现。 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>';

        });
    });

除非在一个 field 有多个事件，否则这种方法效果很好。
我研究过集群和 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>

目前它有两个相互重叠的图钉，当您单击它时，您将获得最后渲染的图钉(最新事件)。

有没有办法在each with js中做到这一点，或者mylatlongs中的数据结构是否需要改变。

Answer 1

可能的方法:

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

      var markers={};
   

2. 当您在此对象中存储标记时，请使用 field ID 作为属性名称，并将所需的属性存储为标记属性，对于 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);
           });
         }
   

3. 将 desc 推送到标记的 descs 属性:

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

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