使用addDomListener和googlemaps不起作用 [英] using addDomListener with googlemaps not working
问题描述
我通过在php中查询数据库来构建googlemap的标记，然后将数据发送到addMarker函数。
对于每个标记，有0到未知数量的违规。我已经将每个标记的违规行为放入一个数组中（称为违规行为）并将其发送到addMarker函数。
我想要做的是每个违规的链接。当您点击链接时，您会看到该违规的详细信息（表格）。
表格最初是display：none。但是当你点击链接时，我想让显示屏进入阻止状态，链接消失。
我想用jquery来完成这项任务，但我在执行时遇到了麻烦。
我一直在尝试使用addDomListener，但它不适用于我 - 它在没有明确错误消息的情况下打破了页面。任何人都可以告诉我如何正确使用addDomListener，或者我应该使用别的东西？
函数addMarker（point，name ，违规，地图）{
var marker = new google.maps.Marker（{
position：point，
icon：'circle.png'
}）;
marker.setMap（map）;
var markerhtml =;
markerhtml + =< div class ='table-responsive'>< table class ='table-condensed'>< tr>< th colspan ='2'> + name +< / th>< / tr>;
markerhtml + =< / table>;
vCount = violations.length / 6; // 6 =每次违规的字段数量; vCount =违规数量
if（violations.length> 0）{
markerhtml + =< p>< strong>违例;
if（violations.length> 6）{
markerhtml + =s; //如果存在多个违规行为，则将其设为'violationS'
}
markerhtml + =< / strong>< / p>; （var j = 0; j
vFineDate = violations [1+（j * 6）];
vFineAmount =违规[2+（j * 6）];
vLeadPermit = violation [3+（j * 6）];
vViolationDescription =违规[4+（j * 6）];
markerhtml + =< div class ='desc'id ='desc+ j +'> + vViolationDescription +< / div>;
var thisDesc = document.getElementById（desc+ j）;
google.maps.event.addDomListener（$（＃thisDesc）[0]，'click'，
function（）{
$（thisDesc）.fadeOut（）;
$（'＃tblViolations'+ j）.fadeIn（'slow'）;
}）;
vResponse =违规[5+（j * 6）];
markerhtml + =< table id ='tblViolation+ j +'class ='table-responsive table-condensed tblViolation'>< tr class ='nDesc'>< td>事件日期：< / td>< td> + vIncidentDate +< / td>< / tr>;
markerhtml + =< tr>< td>罚款日期：< / td>< td> + vFineDate +< / td>< / tr>;
markerhtml + =< tr>< td>精细金额：< / td>< td> + vFineAmount;
markerhtml + =< / td>< / tr>;
markerhtml + =< tr>< td>说明：< / td>< td> + vViolationDescription +< / td>< / tr>;
markerhtml + =< tr>< td>回应：< / td>< td> + vResponse +< / td>< / tr>;
}
markerhtml + =< / table>< / div>;
$ b google.maps.event.addListener（marker，'click'，function（）{
currentCenter = map .getCenter（）;
infowindow.setContent（markerhtml）;
infowindow.setPosition（point）;
infowindow.open（map）;
}）;
google.maps.event.addListener（infowindow，'closeclick'，function（）{
map.setCenter（new google.maps.LatLng（41.0342375，-77.3066405） ）;
}）;
看起来和$（＃thisDesc ）[0]在infowindow中寻找元素。这不会存在于DOM中，直到infowindow'domready'事件触发后才能找到。将您的JQuery代码放入在infowindows'domready'事件中运行的函数中。
google.maps.event.addListener（infowindow ，'domready'，function（）{
// code here
}）;
I've built markers for a googlemap by querying a database in php, then sending the data to an addMarker function.
For each marker, there are 0 to an unknown number of "violations." I've put the violations for each marker into an array (called violations) and sent it to the addMarker function as well.
What I'd like to do is have a link for each violation. When you click the link, you see the details (a table) for that violation.
The table initially is display:none. But when you click the link, I'd like the display to go to block and the link to disappear.
I'd like to use jquery to accomplish this task, but I'm having trouble implementing it.
I've been trying to use addDomListener, but it just isn't working for me--it breaks the page without a clear error message. Can anyone tell me how to properly use addDomListener, please, or should I be using something else?
function addMarker(point, name, violations, map) {
var marker=new google.maps.Marker({
position:point,
icon:'circle.png'
});
marker.setMap(map);
var markerhtml = "";
markerhtml += "<div class='table-responsive'><table class='table-condensed'><tr><th colspan='2'>" + name + "</th></tr>";
markerhtml += "</table>";
vCount = violations.length/6; //6=number of fields per violation; vCount = number of violations
if (violations.length > 0) {
markerhtml += "<p><strong>Violation";
if (violations.length > 6) {
markerhtml += "s"; //make it 'violationS' if there are more than one violation
}
markerhtml += "</strong></p>";
for (var j=0; j<vCount; j++) {
vIncidentDate = violations[0+(j*6)];
vFineDate = violations[1+(j*6)];
vFineAmount = violations[2+(j*6)];
vLeadPermit = violations[3+(j*6)];
vViolationDescription = violations[4+(j*6)];
markerhtml += "<div class='desc' id='desc" + j + "'>" + vViolationDescription + "</div>";
var thisDesc = document.getElementById("desc"+j);
google.maps.event.addDomListener($("#thisDesc")[0], 'click',
function(){
$(thisDesc).fadeOut();
$('#tblViolations'+j).fadeIn('slow');
});
vResponse = violations[5+(j*6)];
markerhtml += "<table id='tblViolation" + j + "' class='table-responsive table-condensed tblViolation'><tr class='nDesc'><td>Incident date:</td><td>" + vIncidentDate + "</td></tr>";
markerhtml += "<tr><td>Fine date:</td><td>" + vFineDate + "</td></tr>";
markerhtml += "<tr><td>Fine amount:</td><td>" + vFineAmount;
markerhtml += "</td></tr>";
markerhtml += "<tr><td>Description:</td><td>" + vViolationDescription + "</td></tr>";
markerhtml += "<tr><td>Response:</td><td>" + vResponse + "</td></tr>";
}
markerhtml += "</table></div>";
}
google.maps.event.addListener(marker, 'click', function() {
currentCenter=map.getCenter();
infowindow.setContent(markerhtml);
infowindow.setPosition(point);
infowindow.open(map);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.setCenter(new google.maps.LatLng(41.0342375, -77.3066405));
});
Looks to be a problem with $("#thisDesc")[0] looking for an element in the infowindow. That won't exist in the DOM and be findable until after the infowindow 'domready' event fires. Put your JQuery code inside the function that runs on the infowindows 'domready' event.
google.maps.event.addListener(infowindow, 'domready', function() {
// code here
});
这篇关于使用addDomListener和googlemaps不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
