Question

我有一个我在谷歌地图中呈现的事件和场所列表。 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中的数据结构是否需要更改。

Answer 1

可能的方法：

创建一个存储标记的对象：
```
   var markers={};
```

将标记存储在此对象中时，使用venueid作为property-name并将所需属性存储为marker-properties，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/

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

1 个答案: