Google 地图标记聚类器:嵌套点击处理
Google Maps Marker Clusterer: Nested Click Handling
在一整天都在处理 DOM 和事件传播问题之后,我遇到了我一直试图使用标记聚类器处理的最后一个问题。
目前,我正在将点击处理程序附加到 DOM 元素,以使用此代码更改单个信息框的状态。
//google infobox plug in
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid #E0E0E0; margin-top: 8px; background: white; padding: 5px; border-radius: 7px;";
boxText.innerHTML = contentString;
//when infowindow is clicked, open view...
google.maps.event.addDomListener(boxText, 'click', (function (marker) {
return function () {
$state.go("comments", {
"shoutId": activeId
});
}
})(marker));
对于单个信息框 window,这完全符合预期。但是,当我在集群上调用 getMarkers 并执行基本相同的操作时,结果却不一样。
在 getMarker 函数中,我使用 for 循环遍历集群并附加一个信息框,其中包含循环内容。我可以将 boxText 事件处理程序应用于整个 window 但这不会给我每个单独标记部分的事件处理程序..
这是我在标记群集点击事件处理程序中使用的代码
google.maps.event.addListener(mc, 'click', function (cluster, $event) {
var content = '';
var clickedMarkers = cluster.getMarkers();
var splitterBar = "border-bottom";
for (var i = 0; i < clickedMarkers.length; i++) {
if (i === 0) {
var var_pos = clickedMarkers[i];
}
var clickedMarkersNames = clickedMarkers[i].title;
var innerText = document.createElement("div");
//Format the shout body
content += '<div id="content " class="' + splitterBar + '">' +
'<div id="bodyContent">' +
'<article id="shout' + i + '"class="">' +
'<p> ' +
clickedMarkers[i].title +
'</p>' +
'<a data-ui-sref="comments">' +
'<small class="grey">' + clickedMarkers[i].address + ' • ' +
moment.duration(Date.now() - clickedMarkers[i].time).humanize() + ' • ' +
clickedMarkers[i].decibels + ' dB • ' +
clickedMarkers[i].echoes + echoesPlural +
'</small>' +
'</a>' +
'</article>' +
'</div>' +
'</div>';
//when infowindow is clicked, open view...
google.maps.event.addDomListener(innerText, 'click', (function () {
return function () {
alert("click");
}
})());
}
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid #E0E0E0; margin-top: 8px; background: white; padding: 0px; border-radius: 7px; max-height: 325px; overflow-y: auto;";
boxText.setAttribute("class", "animated fade");
boxText.innerHTML = content;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-135, -40),
zIndex: null,
boxStyle: {
background: "",
opacity: 1,
width: "280px"
},
closeBoxMargin: "13px 5px 5px 5px",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
alignBottom: true,
pane: "floatPane",
enableEventPropagation: false
};
var ib1 = new InfoBox(myOptions);
if (previousInfowindow) {
previousInfowindow.close();
}
previousInfowindow = ib1;
ib1.open(map, var_pos);
});
编辑:添加了完整的标记点击集群
我觉得附件必须在 for 循环内完成,否则范围将不正确。
我已经阅读了大量关于聚类器相关的稀疏信息,但我觉得这是一个简单的问题,我很想从其他人那里获得一些见解。感谢您的帮助!
经过一些黑客攻击。我什至不知道是否可以通过这种方式附加 DomListeners。去解决它。因为我无法在信息框的 html 框中使用任何 angular 语法。对于每个标记集群,我为内容制作了一个 A 元素。将其样式设置为块,然后隐藏所有 link 元素,使其看起来像正常的。我手动将 href 指向我试图导航到的视图,并使用我保存的 ID 属性 来完成路线。它在 ionic 内部工作,但这是一个粗略的技巧。我想 post 我是如何绕过它的,尽管对于其他可能正在寻找的人来说。
在一整天都在处理 DOM 和事件传播问题之后,我遇到了我一直试图使用标记聚类器处理的最后一个问题。
目前,我正在将点击处理程序附加到 DOM 元素,以使用此代码更改单个信息框的状态。
//google infobox plug in
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid #E0E0E0; margin-top: 8px; background: white; padding: 5px; border-radius: 7px;";
boxText.innerHTML = contentString;
//when infowindow is clicked, open view...
google.maps.event.addDomListener(boxText, 'click', (function (marker) {
return function () {
$state.go("comments", {
"shoutId": activeId
});
}
})(marker));
对于单个信息框 window,这完全符合预期。但是,当我在集群上调用 getMarkers 并执行基本相同的操作时,结果却不一样。
在 getMarker 函数中,我使用 for 循环遍历集群并附加一个信息框,其中包含循环内容。我可以将 boxText 事件处理程序应用于整个 window 但这不会给我每个单独标记部分的事件处理程序..
这是我在标记群集点击事件处理程序中使用的代码
google.maps.event.addListener(mc, 'click', function (cluster, $event) {
var content = '';
var clickedMarkers = cluster.getMarkers();
var splitterBar = "border-bottom";
for (var i = 0; i < clickedMarkers.length; i++) {
if (i === 0) {
var var_pos = clickedMarkers[i];
}
var clickedMarkersNames = clickedMarkers[i].title;
var innerText = document.createElement("div");
//Format the shout body
content += '<div id="content " class="' + splitterBar + '">' +
'<div id="bodyContent">' +
'<article id="shout' + i + '"class="">' +
'<p> ' +
clickedMarkers[i].title +
'</p>' +
'<a data-ui-sref="comments">' +
'<small class="grey">' + clickedMarkers[i].address + ' • ' +
moment.duration(Date.now() - clickedMarkers[i].time).humanize() + ' • ' +
clickedMarkers[i].decibels + ' dB • ' +
clickedMarkers[i].echoes + echoesPlural +
'</small>' +
'</a>' +
'</article>' +
'</div>' +
'</div>';
//when infowindow is clicked, open view...
google.maps.event.addDomListener(innerText, 'click', (function () {
return function () {
alert("click");
}
})());
}
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid #E0E0E0; margin-top: 8px; background: white; padding: 0px; border-radius: 7px; max-height: 325px; overflow-y: auto;";
boxText.setAttribute("class", "animated fade");
boxText.innerHTML = content;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-135, -40),
zIndex: null,
boxStyle: {
background: "",
opacity: 1,
width: "280px"
},
closeBoxMargin: "13px 5px 5px 5px",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
alignBottom: true,
pane: "floatPane",
enableEventPropagation: false
};
var ib1 = new InfoBox(myOptions);
if (previousInfowindow) {
previousInfowindow.close();
}
previousInfowindow = ib1;
ib1.open(map, var_pos);
});
编辑:添加了完整的标记点击集群 我觉得附件必须在 for 循环内完成,否则范围将不正确。
我已经阅读了大量关于聚类器相关的稀疏信息,但我觉得这是一个简单的问题,我很想从其他人那里获得一些见解。感谢您的帮助!
经过一些黑客攻击。我什至不知道是否可以通过这种方式附加 DomListeners。去解决它。因为我无法在信息框的 html 框中使用任何 angular 语法。对于每个标记集群,我为内容制作了一个 A 元素。将其样式设置为块,然后隐藏所有 link 元素,使其看起来像正常的。我手动将 href 指向我试图导航到的视图,并使用我保存的 ID 属性 来完成路线。它在 ionic 内部工作,但这是一个粗略的技巧。我想 post 我是如何绕过它的,尽管对于其他可能正在寻找的人来说。