0

マップを含む Web アプリがあります。マップ上のさまざまなレイヤーのオンとオフを切り替える、小さなカスタム マップ コントロールを追加しました。現在、レイヤーは 2 つしかありませんが、ほとんどのブラウザーでうまく機能します。

IE8+7 を除く。オンにすると、マップにレイヤーが表示されません。私が知る限り、マップは kmz/kml ファイルをロードしています (preserveViewport が false に設定されている場合、マップは正しい場所に移動します) が、それらは表示されません。1 つのレイヤーにはポリラインが含まれ、もう 1 つのレイヤーにはマーカーが含まれます。私が使用するコードは以下のとおりです。

function someFunction() {
    //code to initialise map etc goes here...
    var layers = [];

    //Create 1st layer
    var exchangeslayer = new google.maps.KmlLayer('http://link.to.file/exchanges.kmz'
        suppressInfoWindows: true,
        preserveViewport: true
    });
    layers.push({name: "Exchanges", layer: exchangeslayer});

    //Code to create second layer
    var nyclayer = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml'
        suppressInfoWindows: true,
        preserveViewport: false
    });
    layers.push({name: "NY City Tracks", layer: nyclayer});

    addCustomLayerControls(layers);
}

function addCustomLayerControls(layers) {
    //there is code here that would generate the divs for the custom map control
    var container; //container is a div element created via javascript

    for (var i = 0; i < layers.length; i++) {
        this.addLayerLabelToContainer(layers[i], container);
    }

    //some more code
}

function addLayerLabelToContainer(layer, container) {
    var map; //Assume I get a reference to the map

    //some code here to make pretty labels for the map controls...
    var layerLabel; // layerLabel is a div element created via javascript

    google.maps.event.addDomListener(layerLabel, 'click', function() {
        if(layer.layer.map == null) {
            layer.layer.setMap(map);
        } else {
            layer.layer.setMap(null);
        }
    });
}
4

2 に答える 2

2

それで、CSSに関連する私の問題が判明しました。max-width: 100%スタイルシートの 1つがすべての img タグに適用されていました。これは、マップ マーカー/ポリラインに大混乱をもたらしていました。

今見ると明らかですが、問題がjavascriptに関係していると考えると、それほど明白ではありません。そのため、私と同じ間違いを犯した他の人のために、この回答をここに残しておきます。

于 2012-10-31T15:27:50.063 に答える
0

このようにaddLayerLabelToContainer ()を変更すると、IE で期待どおりに動作します。IE 8 および 9 で KMZ が正しく読み込まれることを確認しました。

function addLayerLabelToContainer(layer, container) {
    // var map; //Assume I get a reference to the map
    //some code here to make pretty labels for the map controls...
    var layerLabel; // layerLabel is a div element created via javascript                       

    if(layer.layer.map == null) {               
        layer.layer.setMap(map);
    } else {
        layer.layer.setMap(null);
    }
}

addDomListener() を呼び出す必要はありません。API 構文にも注意してください。

addDomListener(instance:Object, eventName:string, handler:Function)

また、次のようにsomeFunctionの構文エラーをマイナー修正しました。

function someFunction() {
    // var map; //assume map is initialised, I've just removed that code
    var layers = [];

    // see https://developers.google.com/maps/documentation/javascript/layers
    //Create 1st layer
    var exchangeslayer = new google.maps.KmlLayer(
    'http://kml-samples.googlecode.com/svn/trunk/kml/kmz/simple/big.kmz',
        { suppressInfoWindows: true, preserveViewport: true
        });
    layers.push( {name: "Exchanges", layer: exchangeslayer} );

    // ...
    addCustomLayerControls(layers); 
}
于 2012-10-31T14:06:03.817 に答える