Question

我正在使用谷歌地图，例如，假设我有两个不同的记录用于相同的地址。我没有显示两个引脚，而是显示一个引脚，并在引脚上方的信息框中显示来自这两个记录的内容。这是我目前的代码：

 var infoWindow = new google.maps.InfoWindow();
            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title,
                    companyname: data.companyname
                });                
                googleMarkers.push(marker);
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {                  
                        infoWindow.setContent('<div style="width:250px;height:80px;"><IMG BORDER="0" width="100" height="50" style="margin-right:5px;" ALIGN="Left" SRC='+ decodeURIComponent(data.logofilename)+'>'+data.companyname+'<br /> ' + '<a href='+'javascript:NewWindow('+"'"+'../JobSeeker/JobPostingApplication.aspx?PostingID='+data.postingid+'&GetPosting=True'+"'"+')>' + data.jobtitle+'</a></div>');            
                        infoWindow.open(map, marker);
                    });

                    google.maps.event.addListener(marker, "mouseover", function (e) {                            
                        infoWindow.setContent('<div style="width:250px;height:80px;"><IMG BORDER="0" width="100" height="50" style="margin-right:5px;" ALIGN="Left" SRC='+ decodeURIComponent(data.logofilename)+'>'+data.companyname+'<br /> ' + '<a href='+'javascript:NewWindow('+"'"+'../JobSeeker/JobPostingApplication.aspx?PostingID='+data.postingid+'&GetPosting=True'+"'"+')>' + data.jobtitle+'</a></div>');
                        infoWindow.open(map, marker);
                    });
                    //google.maps.event.addListener(marker, "mouseout", function (e) {                  
                    //    infoWindow.close();
                    //});
                })(marker, data);
            }

赞赏每条评论。谢谢，Laziale

Answer 1

而不是使用数组存储标记使用对象并使用基于LatLng的哈希作为标记名。

在创建标记之前，检查是否已存在具有此名称/哈希的对象，如果是，请不要创建新标记，扩展现有标记。

扩展意味着：将所需的infowindow内容存储为标记属性。标记已存在时，将新内容附加到现有内容（marker-property）。

在标记的mouseover / click-listeners中，将infowindow的内容设置为此属性。

样品：

        var infoWindow = new google.maps.InfoWindow(),
            map = new google.maps.Map(document.getElementById("dvMap"), 
                                       mapOptions),
            googleMarkers={};
        for (i = 0; i < markers.length; i++) {

            (function (data) {
              var myLatlng    = new google.maps.LatLng(data.lat,data.lng),
                  //this hash will round the latLngs to 6 decimals
                  hash        = myLatlng.toUrlValue(),
                  iwContent   = '<div>BuildTheContentHere</div>';
              //create a new marker
              if(typeof googleMarkers[hash]==='undefined'){
                googleMarkers[hash] = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: data.title,
                      companyname: data.companyname,
                      iwContent:iwContent
                      });
                google.maps.event.addListener(googleMarkers[hash], "click", 
                    function (e) {                  
                      infoWindow.setContent(this.get('iwContent'));            
                      infoWindow.open(map, this);
                });
                google.maps.event.addListener(googleMarkers[hash], "mouseover", 
                    function(e){                  
                      infoWindow.setContent(this.get('iwContent'));            
                      infoWindow.open(map, this);
                });
              }else{
              //extend existing marker
                 googleMarkers[hash].iwContent+=iwContent;
              }

            })(markers[i]);
        }

Answer 2

按公司名称对标记对象进行排序，并检查是否存在重复项。如果是这样，请将这些项目合并为一个。在创建标记之前执行此操作。首先对它进行排序，然后你可以直接遍历它并检查标记[i] .companyname === markers [i-1] .companyname。

类别：

markers.sort(function (a, b) {
    if (a.companyname > b.companyname) {
        return 1;
    } else if (a.companyname < b.companyname) {
        return -1;
    } else {
        return 0;
    }
});

var j = markers.length;
while (j-- && j > 0) {
    if (markers[j].companyname === markers[j - 1].companyname) {
        //move j into j-1
        markers[j - 1].title += "\n\n" + markers[j].title;
        markers.splice(j, 1); //remove the duplicate
    }
}

在一个信息框谷歌地图中合并两个标记的内容

2 个答案: