2012-06-05 1 views
0

Google의 타일 오버레이 및 KML 요소가있는 웹 사이트에서 Google지도를 구현하는 중입니다. 예를 들어 페이지가 특정 URL에서로드 될 때 이미 활성화 된 타일 오버레이 중 하나로 초기화 할 수 있도록 코드를 생성하도록 이전에 요청되었습니다. 최근 KML 요소에 의해 설명 된 건물에 대해 동일한 작업을 수행하도록 요청하여 특정 URL이있는 페이지에 도착하면 자동으로 건물의 정보를 확대/축소하고 센터에 표시합니다.Google Maps/geoxml3 파서를 기준으로 Javascript 기능의 실행이 지연됩니까?

그러나 타일 오버레이 작업으로 시작하는 동안 KML 건물은 그렇지 않습니다. 몇 가지 테스트를 거친 후 URL을 확인하는 코드가 실행될 때 페이지가 여전히 KML 요소를로드 중이므로 비교하거나 사용할 코드가 존재하지 않는다고 결정했습니다.

URL을 평가하기위한 코드) (

function urlClick() { 
    var currentURL = window.location.href; //Retrieve page URL 
    var URLpiece = currentURL.slice(-6); //pull the last 6 digits (for testing) 
    if (URLpiece === "access") {   //If the resulting string is "access": 
     access_click();      //Display accessibility overlay 
    } else if (URLpiece === "middle") { //Else if the string is "middle": 
     facetClick('Middle College');  //Click on building "Middle College" 
    }; 
}; 

을 facetClick (의 onLoad의 끝에 배치 ")는 (초기화"=);

function facetClick(name) { //Convert building name to building ID. 
    for (var i = 0; i < active.placemarks.length; i++) { 
     if (active.placemarks[i].name === name) { 
      sideClick(i)  //Click building whose id matches "Middle College" 
     }; 
    }; 
}; 

파이어 버그 콘솔 오류

active is null 
for (var i = 0; i < active.placemarks.length; i++) { 

active.placemarks는 KML 요소가 페이지에로드하고, null이되고, 더 KML이 아직로드되지 않았 음을 의미하는 것입니다. 간단히 말해서, 나는 mistiming을 가지고 있으며, KMl이로드 된 후에 실행할 URL 코드를 배치하기에 적합한 장소를 찾지 못하는 것 같습니다. 위에서 언급했듯이, onLoad = "initialize()"의 끝 부분에 배치했지만, 함수에서 더 빨리로드 될 때까지 기다리지 않고 나머지 함수가 실행됩니다.

에 onLoad 내가 한 내 문제를 의심

information(); //Use the buttons variables inital state to set up description 
buttons();  //and button state 
button_hover(0); //and button description to neutral. 

//Create and arrange the Google Map. 

//Create basic tile overlays. 

//Set up parser to work with KML elements. 
myParser = new geoXML3.parser({ //Parser: Takes KML and converts to JS. 
    map: map,     //Applies parsed KML to the map 
    singleInfoWindow: true, 
    afterParse: useTheData  //Allows us to use the parsed KML in a function 
}); 
myParser.parse(['/maps/kml/shapes.kml','/maps/kml/shapes_hidden.kml']); 
google.maps.event.addListener(map, 'maptypeid_changed', function() { 
    autoOverlay(); 
}); 

//Create other tile overlays to appear over KML elements. 

urlClick(); 

는 자바 스크립트에 우리의 KML 파일을 변환 geoxml3 파서 (http://code.google.com/p/geoxml3/)를 사용하여에있다 "() 초기화"=. 페이지에서 모든 요소로드가 완료되면 KML 요소를 포함하여 페이지의지도가 계속로드됩니다. 나는 또한 모든 모양이 파싱 된 후에 실행하는 것처럼 보이는 여러 곳에서 파서 자체에 urlClick()을 배치하려고 시도했지만 거기에서도 성공하지 못했습니다.

파서를 제거하려고했지만 파서가 KML 셰이프를 반환 한 후에 "urlClick"을 실행할 수있는 방법이 있는지 알고 싶습니다. 이상적으로, 나는 여러 가지 브라우저가 모두 다른 시간에 페이지를로드하므로 "3 초 기다렸다가 가다"와 같이 기다릴 시간을 정의하는 임의의 방법을 사용하고 싶지 않습니다. 오히려, 나는 "파서가 완료, 실행할 때"또는 "Google지도가 완전히로드되거나 실행될 때"또는 "urlClick으로 진행하기 전에 구문 분석기가 완료 될 때까지 대기"라고 말하는 어떤 방법을 찾고 있습니다.


편집 : 여기 위에있는 문제의 기본적인 형태와지도에 대한 링크입니다.테스트 서버에서지도의 다음 업데이트를 개발 했으므로 facetClick()은이 라이브 버전의 일부가 아니며 대신 출력 함수 sideClick()을 사용합니다. 그러나 오류가 계속이 배열에서 동일합니다

active is null 
google.maps.event.trigger(active.gpolygons[poly],'click'); 

지도 : http://www.beloit.edu/maps/

지도/액세스 W : w http://www.beloit.edu/maps/?access

지도/건물 클릭 http://www.beloit.edu/maps/?middle


편집 : 내 기능의 재건 작업에 많은 시간을 할애했습니다. 파서가 자바 스크립트에서, 그리고 낮은, 보라, 파서없이 잘 작동합니다. 파서에 의해 전달되기를 기다리기보다는 각 폼을 코드 전에 개별적으로 정의해야하므로 분명합니다. 대답은 "고유 URL을 원하면 파서를 버리십시오"라는 것입니다. > _ <

+0

당신의 "useTheData"기능은 무엇을했다? geoxml3을 사용하여이 작업을 수행 할 수는 있지만 완전한 예제가 없으면 (문제가있는지도를 링크하는 것이 바람직합니다.) – geocodezip

+0

@geocodezip useTheData는 활성화 된 장소 표시를 통해 실행되며 지도 이름이 아닌 알파벳 순서로 이름 목록을 표시하고 사용자가 이름으로 건물을 찾고 찾을 수있게합니다. 예제/전체지도는 사무실에 도착했을 때 링크를 제공합니다. 그 순간. –

+0

@geocodezip지도에 대한 링크가 추가되었습니다. 위의 편집을 참조하십시오. –

답변

1

마커 및 infoWindow가 함수를 실행하기 전에로드 될 때까지 비슷한 문제가 발생했습니다. 여기에 해결책이 있는데 (How can I check whether Google Maps is fully loaded? @ Veseliq의 답변 참조) Google지도 이벤트 리스너 기능을 사용하여지도가 '유휴'상태인지 확인하는 것이 트릭을 수행한다는 것을 알았습니다. 이 솔루션은 KML 레이어에서도 작동한다고 가정합니다. 이지도 후 유휴 상태가되면 '유휴'이벤트가 "해고되는 내용의 API 참조 (https://developers.google.com/maps/documentation/javascript/reference를)에서

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    // do something only the first time the map is loaded 
}); 

: 기본적으로 당신이해야 할 것은 당신의 초기화 함수의 끝에 다음을 포함입니다 패닝 또는 확대/축소 "할 수 있습니다. 그러나 map_canvas에있는 모든 항목이로드 된 후 초기 페이지로드에서 발생한다는 사실이 드러납니다. addListenerOnce 호출을 사용하면 처음 페이지가로드 된 후 절대로 다시 실행되지 않습니다. 즉 줌 또는 팬 동작 후에는 실행되지 않습니다.


두 번째 옵션 :
난 당신이 콜백 접근 방식을 취할 수 언급 한 바와 같이, 나는이 만 구문 분석을 완료 한 후 urlClick 함수를 호출 할 것으로 판단된다.

function someFunction(callback){ 
    myParser.parse(['/maps/kml/shapes.kml','/maps/kml/shapes_hidden.kml']); 
    callback(); 
} 

다음 초기화에 당신이 가진 것 : 여기 당신은 아마 작동하도록 코드를 배열하는 방법이다

someFunction(function(){ 
    urlClick(); 
}); 

당신은 당신의 mapmyParser 변수는 글로벌해야 할 것이다.

자료 :이 링크는 자바 스크립트에서 작동하는 방법 콜백 기능에 우수하고 상세한 간단한, http://www.impressivewebs.com/callback-functions-javascript/

+0

매우 이상적인 솔루션입니다. 그러나 그것을 시험 할 때, 나는 하나의 작은 문제에 직면한다. 파이어 폭스에서 실행할 때 - 무언가에 의해 무게가 나간 것처럼 느껴진다. 그러나 훨씬 빠른 Chrome에서 사용해 보면 동일한 오류가 발생합니다. 파서가 파싱을 완료하기 전에 파서가 맵 자체에 포함되어 있지 않고 단순히 맵에 셰이프를 추가/전달한다고 가정합니다. 파서가 파싱을 완료하기 전에지도가 완전히로드되고 유휴 상태에 도달하면 여전히 "활성 null입니다 "오류입니다. 지도를 기반으로하는 지연 경로가 작동하지 않는 것으로 보입니다. > _ < –

+0

재미있는 점은 파서가 만드는 레이어가지도 자체와 별개임을 알지 못했습니다. 이 경우에는 myParser.parse ([ '/ maps/kml/shapes.kml', '/ maps/kml/shapes_hidden.kml'];)를 별도의 함수에 넣으면됩니다. 'urlClick()'함수를 다른 하나의 콜백으로 호출하는 것이다. 나는 나의 대답을 업데이트 할 것이다. –

+0

오, 재미있는 기술입니다. 나는 그것을 시험해보고 기억해야 할 것이다. 하지만 Chrome에서 작동한다는 점에서 이유를 추측 할 수는 없지만 Firefox에서는 작동하지 않습니다. (Un) 다행히 퍼서를 제거하면 완벽하게 작동하는 것처럼 보입니다. 도움을 주셔서 감사합니다. 파서는 고유 URL을 만들기 위해 까다로운 문제를 해결하는 것보다 더 많은 도움이 될 것이라고 생각합니다. 최소한 나는 몇 가지 사실을 배웠습니다. ;삼 –

관련 문제