在一個信息框Google地圖中合並兩個標記的內容

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的哈希作為標記名。

在創建標記之前，請檢查是否已經存在具有此名稱/哈希的對象，如果是，則不要創建新標記，請擴展現有標記。

擴展方式：將所需的信息窗口內容存儲為標記屬性。 當標記已存在時，將新內容附加到現有內容（標記屬性）。

在標記的鼠標懸停/單擊偵聽器中，將信息窗口的內容設置為此屬性。

樣品：

        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

按公司名稱對標記對象進行排序，並檢查是否存在重復項。 如果是這樣，請將這些項目合並為一個。 在創建標記之前，請執行此操作。 通過首先對其進行排序，您可以接下來遍歷它並檢查markers [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
    }
}