使用带有 googlemaps 的 addDomListener 不起作用答案

【问题标题】：using addDomListener with googlemaps not working使用带有 googlemaps 的 addDomListener 不起作用
【发布时间】：2014-02-04 17:01:27
【问题描述】：

我通过在 php 中查询数据库，然后将数据发送到 addMarker 函数，为 googlemap 构建了标记。

对于每个标记，有 0 到未知数量的“违规”。我已将每个标记的违规放入一个数组中（称为违规），并将其发送到 addMarker 函数。

我想做的是为每个违规行为提供一个链接。单击该链接时，您会看到该违规的详细信息（表格）。

表格最初是 display:none。但是当您单击链接时，我希望显示被阻止并且链接消失。

我想使用 jquery 来完成这个任务，但是我在实现它时遇到了麻烦。

我一直在尝试使用 addDomListener，但它对我不起作用——它会在没有明确错误消息的情况下破坏页面。谁能告诉我如何正确使用 addDomListener，或者我应该使用其他东西吗？

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

【问题讨论】：

仅供参考 - 大多数 JS 专家建议使用 Array#join 而不是 + 运算符构建字符串。例如，var html = []; html.push('<div>foo</div>'); html.push('<div>bar</div>'); return html.join('');

标签： jquery google-maps-api-3

【解决方案1】：

$("#thisDesc")[0] 在信息窗口中查找元素时出现问题。在 infowindow 'domready' 事件触发之前，它不会存在于 DOM 中并且可以找到。将您的 JQuery 代码放入在 infowindows 'domready' 事件上运行的函数中。

google.maps.event.addListener(infowindow, 'domready', function() {
  // code here
});

【讨论】：