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

Combine content for two markers in one infobox Google Maps

本文关键字:两个 组合 信息 谷歌地图 一个      更新时间:2023-10-15

我正在使用谷歌地图,例如,假设我有两个不同的记录用于同一地址。我不想显示两个引脚,而是想显示一个引脚,并在引脚上方的信息框中显示这两条记录的内容。

这是我目前拥有的代码:

 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);
            }

不使用数组来存储标记,而是使用对象并使用基于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]);
        }

按公司名称对标记对象进行排序,并检查是否存在重复项。如果是,请将这些项目合并为一个。在创建标记之前请执行此操作。通过首先对其进行排序,您可以在接下来的循环中检查marks[i].companyname===marks[i-1].company name.

排序:

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
    }
}