2014-04-17 68 views
0

我想解析我的kml文件以获取地标的位置,并将html链接添加到这些位置,以便单击时地图将平移到用户单击的位置。然而,随着代码我现在也不会解析正确的文件,并给了我这个错误解析kml文件,如xml文件

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

回答

0

item不是一个节点,它只是其中可以不使用作为参数用于appendChild的字符串。

创建一个节点:

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

或使用jQuery(像你后来做了几行):

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

谢谢你,有地标的列表中显示,但它是只发布地标的文字。当我点击文本执行panTo它告诉我: Uncaught TypeError:无法调用方法'panTo'null 这是因为我创建了新的地图项目panToPoint和导航[$(this).index()]对于每个点不是多边形的中心?相反,nav []在数组中有两个以上的经度。 – user2793027