jQuery append 不适用于 google 地图

Question

我的 jQuery 追加功能不工作。我有一个 div 和一个名为 "CollapsiblePanelContent" 的 class。我还有一个 google 地图标记生成器，可以为我生成标记。我有一个数组 markerArr，其中包含来自 XML 的所有标记信息。生成器完成后，我调用函数 appendMarkers():

function appendMarkers() {   
for(var i = 0; i < markersArr.length;
i++) {      
var marker = markersArr[i];

$('.CollapsiblePanelContent').append("<a href='#'
onclick='showInfoWindow("+i+")>
 "+marker.getAttribute('name')+"</a><br>");     
} 
}

div 看起来像这样：

div class="CollapsiblePanelContent">

/div>

控制台日志给了我 markerArr 的确切长度，并检查 google 地图和 jquery 是否加载都是正确的。

谁能告诉我我做错了什么？

更新当我在我的函数中使用 marker.getAttribute 时，不知何故它不起作用。但是当我执行以下操作时：

var name = markersArr[i].getAttribute("name")

并将以下内容编辑为：

$('.CollapsiblePanelContent').append(name);

确实有效。对我来说，不清楚为什么这个改变让它起作用。也许有人可以解释一下？

Answer 1

您可以向标记对象添加属性。一旦你找回它，你就可以访问它们。所以：

假设您的标记是这样设置的：

var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                name: 'my name is...'
});

您可以通过这种方式在函数中检索名称：

function appendMarkers() {
    for (var i = 0; i < markersArr.length; i++) {
        var marker = markersArr[i];
        $('.CollapsiblePanelContent').append("<p>"+marker.name+"</p>");
    }
}

Answer 2

该函数包含语法错误。

使用 jQuery 方式而不是字符串连接来创建元素：

      function appendMarkers() {

        for(var i = 0; i < markersArr.length; i++) {      
          var marker = markersArr[i];

          $('.CollapsiblePanelContent')
            .append($('<a>',{href:'javascript:void(0)'})
                    .text(marker.getAttribute('name'))
                     .click(i,showInfoWindow))
            .append('<br/>');    
          } 
        }

注意：在 showInfoWindow 中，i 参数可以通过 arguments[0].data

访问

jQuery append 不适用于 google 地图

jQuery append not working with google maps

html

javascript

jquery

google-maps-api-3