Question

如果有更容易/更好的方法，请说出来（我刚开始学习JS，第一语言），但这就是我想要实现的目标：

我有一个XML文件，其中包含一组用于谷歌地图的标记，即：

<?xml version="1.0" encoding="UTF-8"?>
<markers>
  <marker name="Our Venue" lat="32.735873" lng="-117.255323" icon="wedding">
    &lt;div id="info"&gt; &lt;h2&gt;Title&lt;/h2&gt; &lt;a href="http://site.com/link.html"&gt;Official web site&lt;/a&gt; &lt;p&gt;Blah blah blah!&lt;/p&gt; &lt;/div&gt;
  </marker>
...

我可以让jQuery加载所有信息并将其解析为google.maps.Marker：

    jQuery.get("map_data.xml", {}, function(data) {
        jQuery(data).find("marker").each(function() {
            var marker = jQuery(this);
            var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng")));
            var title = marker.attr("name");
            var icon = marker.attr("icon");
            var markerContent = marker.contents();
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: crIconRegistry[icon],
                title: title
            });

现在，我想点击地图标记，将XML文件中的HTML内容插入到页面上的DIV中，如下所示：

jQuery.jcps.insertFromMap = function (speed, target, markerContent) {
    if (speed == 0) {
    $(target).html(markerContent);
}
else {  
    $(target).fadeToggle(speed, function(){$(this).html(markerContent);}).fadeToggle(speed);
    }
}

google.maps.event.addListener(marker, "click", function() {
    jQuery.jcps.insertFromMap(crFaderSpeed, crDefaultPanel, markerContent);
});

然而，当我尝试这个（在safari中，尚未测试其他人）时，我收到以下错误：“WRONG_DOCUMENT_ERR：DOM例外4：节点用于与创建它的文档不同的文档中”

TIA提供任何帮助！

Answer 1

你可能不止一次使用markerContent吗？它可能导致奇妙的事情：example。解决这个问题的方法是使用.clone：example

Answer 2

有关详细信息，请参阅Cross-Browser Scripting with importNode()

上的优秀说明

在importNode中添加markerContent之前，您必须先检查是否支持target。

如果您使用的是jQuery 1.5，请参阅parseXML()，这似乎已经解决了这个问题（虽然我自己没有测试过）。

Answer 3

解决了，虽然我不确定为什么这会产生影响。我之前的代码使用变量名“marker”两次：首先保存XML jQuery对象，然后重新定义以保存google.maps.Marker对象。一定有我不知道的冲突，因为更改变量名称解决了问题。修改后的代码：

jQuery.get("map_data.xml", {}, function(data) {
        jQuery(data).find("marker").each(function() {
            var node = jQuery(this);
            var latlng = new google.maps.LatLng(parseFloat(node.attr("lat")), parseFloat(node.attr("lng")));
            var title = node.attr("name");
            var icon = node.attr("icon");
            var markerContent = node.contents().text();
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: crIconRegistry[icon],
                title: title
            });
            google.maps.event.addListener(marker, "click", function() {
                jQuery.jcps.insertFromMap(crFaderSpeed, crDefaultPanel, markerContent);
            });
        });
    });

感谢您的帮助！

Answer 4

您的原始代码失败了，因为您尝试将dom节点从一个文档合并到另一个文档中 - 在此上使用safari balks（firefox 7，虽然他们可能不应该使用chrome 15）。正如ritesh指出的那样，你可以调用dom函数importNode。

但是，要避免导入dom节点的深层副本，请使用adoptNode。

它受到所有主流浏览器的支持，包括9（在safari 5，chrome 15，firefox 7上亲自测试）。

希望这是有用的附加信息，

最好的问候，carsten

使用/ jQuery插入从XML文件加载的HTML DOM元素

4 个答案: