在谷歌地图的一个信息框中组合两个标记的内容
Combine content for two markers in one infobox Google Maps
我正在使用谷歌地图,例如,假设我有两个不同的记录用于同一地址。我不想显示两个引脚,而是想显示一个引脚,并在引脚上方的信息框中显示这两条记录的内容。
这是我目前拥有的代码:
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
}
}
相关文章:
- 组合两个javascript函数
- 我该如何组合这两个Greasemonkey脚本
- 如何将具有相同功能的两个select html标签的两个JS组合在一起
- 组合angularjs表单字段的两个正则表达式
- 如何使用jquery将两个字段组合为下拉菜单中的选项
- 如何将两个按钮组合为一个
- 在 JS 中组合两个正则表达式
- JavaScript - 需要帮助组合两个脚本
- 两个分区的可过滤投资组合
- 如何将两个事件的变量组合为一,作为两者的总和.jquery
- 使用javascript或angularfire将两个$firebaseArray组合成一个对象
- 使用this和not组合两个jQuery语句
- 谷歌地图API JS-放置两个组合字段的自动完成
- 使用 jquery 控制两个选择输入的组合值
- 使用jQuery组合两个表单输入值
- 在javascript中组合使用连字符连接的两个字符串
- 在谷歌地图的一个信息框中组合两个标记的内容
- 如何组合两个if语句以使用或运算符
- Sencha ExtJS 4.2:如何在一个网格中同步两个组合编辑器
- 链接两个组合框Javascript/HTML