像xml文件一样解析kml文件

Question

我正在尝试解析我的 kml 文件以获取地标的位置并将 html 链接添加到这些位置，以便在单击时地图将平移到用户单击的位置。但是使用我现在拥有的代码，它不会正确解析文件，并给我这个错误

Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

我假设这个错误意味着当它要为该位置添加链接时，解析器返回了一个空值。我很确定我正在正确地拨打电话，但仍然不确定为什么会弹出此错误，有人可以帮忙吗？

    var map = null;
var KMLLayer = null;
var KMLayer2 = null;
var item = "";
var nav = [];
$(document).ready(function(){
    //initialise a map
    initialize();
$.get("/img/Keenelandlayer2.kml", function(data){
        var html = "";
        //loop through placemarks tags
        $(data).find("Placemark").each(function(index, value){
            //get coordinates and place name
            coords = $(this).find("coordinates").text();
            place = $(this).find("name").text();
            test = "test";
            //store as JSON
            c = coords.split(",")
            nav.push({
                "place": place,
                "lat": c[0],
                "lng": c[1]
            });
            //output as a navigation
            html += "<li>" + place + test + "</li>";
            item = "<li>" + place + test + "</li>";
            document.getElementById("list").appendChild(item);
        })
        //output as a navigation
        $(".navigation").append(html);
        //bind clicks on your navigation to scroll to a placemark
        $(".navigation li").bind("click", function(){
            panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat);
            map.panTo(panToPoint);
        });
    });
}); 
function initialize() {
var mapOptions = {
  center: new google.maps.LatLng( 38.04798015658998, -84.59683381523666),
  zoom: 16,
  disableDefaultUI: true,
  zoomControl: true,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    KMLLayer = new google.maps.KmlLayer({url: 'https://sites.google.com/site/cs499fbt/files/Keenelandlayer1.kml'}, kmlOptions);
    KMLLayer2 = new google.maps.KmlLayer({url:'https://sites.google.com/site/cs499fbt/files/Keenelandlayer2.kml'},kmlOptions);

    KMLLayer.setMap(map);
    google.maps.event.addListener(map, "zoom_changed",function() {
        //below is the line that prevents the labels to appear, needs to be there to allow the second kml layer to be displayed
        event.preventDefault();
        if (!!map){
            var zoom = map.getZoom();
            if (zoom < 16){
                if (!!KMLLayer2.getMap()) KMLLayer2.setMap(null);
                if (!KMLLayer.getMap()) KMLLayer.setMap(map);
            }
            else{
                if (!KMLLayer2.getMap()) KMLLayer2.setMap(map);
                if (!!KMLLayer.getMap()) KMLLayer.setMap(null);
            }
        }
    });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

item 不是节点，它只是一个字符串，不能用作appendChild 的参数。

创建一个节点：

item = document.createElement('li');
item.appendChild(document.createTextNode(place + test));
document.getElementById("list").appendChild(item);

或者使用 jQuery（就像你在几行之后做的那样）：

$('#list').append($("<li>" + place + test + "</li>"));