2014-04-17 3 views
0

내 kml 파일을 구문 분석하여 위치 표시의 위치를 ​​가져오고 해당 위치에 HTML 링크를 추가하여 클릭하면지도가 사용자가 클릭 한 위치로 이동합니다. 그러나 올바르게 파일을 구문 분석, 나는이 오류는 위치에 대한 링크를 추가하려고 할 때 파서가 null 값을 반환 된 망 가정 나에게이 오류xml 파일과 같은 kml 파일 구문 분석

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

가 보여 장소 표시의 목록을 가지고 그 주셔서 감사합니다, 그러나 그것은이다 장소 표시 텍스트 만 게시합니다. 잡히지 않은 TypeError : null의 메서드 'panTo'를 호출 할 수 없습니다. 새지도 항목 panToPoint와 nav [$ (this) .index()]를 작성했기 때문에이 방법이 사용됩니까? 각 점은 다각형의 중심이 아니므로? 대신 nav [] 배열에 두 개 이상의 lat lng 있습니다. – user2793027