0

独自のタイル オーバーレイと KML 要素を使用して、Web サイトに Google マップを実装する作業を行っています。たとえば、特定の URL からページが読み込まれたときに、既に有効になっているタイル オーバーレイのいずれかで初期化されるように、コードを作成するよう以前に依頼されました。最近、特定の URL のページに到達すると、建物の情報を自動的にズーム、中央揃え、表示するように、KML 要素によって輪郭が描かれている建物に対して同じことを行うように依頼されました。

ただし、最初はタイル オーバーレイは機能しますが、建物の KML は機能しません。いくつかのテストを行った後、URL をチェックするコードが実行されると、ページはまだ KML 要素をロードしているため、比較または使用するコードが存在しないことがわかりました。

URL を評価するためのコード(onLoad="initialize()" の最後に配置)

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

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"
        };
    };
};

Firebug コンソール エラー

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

active.placemarks はページに読み込まれる KML 要素で、null は KML がまだ読み込まれていないことを意味します。要するに、タイミングがずれており、KMl がロードされた後に実行する URL コードを配置する適切な場所が見つからないようです。上記のように、onLoad="initialize()" の最後に配置しましたが、KML が関数の前半で完全に読み込まれるのを待つ代わりに、関数の残りの部分が実行されているように見えます。

onLoad="initialize()"

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

私の問題の 1 つは、KML ファイルを Javascript に変換する 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/

アクセス可能な地図: http://www.beloit.edu/maps/?access

建物クリック付き地図: http://www.beloit.edu/maps/?middle

EDIT : Javascript でパーサーの機能を再構築する作業に 1 日のほとんどを費やしましたが、パーサーがなくても問題なく動作します。パーサーによって渡されるのを待つのではなく、コードの前に各形状を個別に定義する必要があるため、これは明らかだと思います。答えは「一意の URL が必要な場合は、パーサーを削除する」であるように思われます。>_<

4

1 に答える 1

1

関数を実行する前にマーカーと infoWindows が読み込まれるのを待つときに、同様の問題に遭遇しました。ここで解決策を見つけました（Googleマップが完全にロードされているかどうかを確認するにはどうすればよいですか？ @Veseliqの回答を参照してください）、Googleマップのイベントリスナー関数を使用してマップが「アイドル」であることを確認すると、うまくいきます。このソリューションは KML レイヤーでも機能すると思います。基本的に、あなたがしなければならないことは、初期化関数の最後に以下を含めることです:

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

API リファレンス ( https://developers.google.com/maps/documentation/javascript/reference ) では、「アイドル」イベントは「パンまたはズーム後にマップがアイドル状態になると発生する」と記載されています。ただし、map_canvas 内のすべてがロードされた後の最初のページのロードでも発生することは事実であるようです。また、addListenerOnce呼び出しを使用することで、最初のページの読み込み後に再度実行されないようにします (つまり、ズームまたはパン アクションの後に呼び出されません)。

2 番目のオプション:
前述したように、コールバック アプローチを使用できます。これは、解析が完了した後にのみ urlClick 関数を呼び出すと思います。コードを機能させるには、おそらく次のように配置する必要があります。

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

そして、あなたの初期化には次のものがあります：

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

mapおよびmyParser変数をグローバルにする必要があります。

リソース: このリンクには、コールバック関数が JavaScript でどのように機能するかについての優れた詳細な概要がありました。 http://www.impressivewebs.com/callback-functions-javascript/

于 2012-06-06T19:51:51.647 に答える