谷歌地圖KMZ文件無法在IE8和IE7中渲染

Question

我有一個帶有地圖的網絡應用程序。我添加了一個漂亮的小自定義地圖控件來打開和關閉地圖上的不同圖層。目前只有兩層，在大多數瀏覽器中都很好用。

不包括IE8 + 7。打開時，地圖上沒有顯示任何圖層。據我可以告訴地圖加載kmz/kml文件（當preserveViewport設置爲false時，地圖移動到正確的位置），但它們只是沒有出現。一層包含多段線，另一層包含標記。我使用的代碼如下：

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

Answer 1

所以事實證明我與CSS問題。我的一個樣式表是將max-width: 100%應用於所有img標籤。這是與地圖標記/折線玩havok。

現在看來它很明顯，但是當你認爲問題與JavaScript有關時，它並不那麼明顯。因此，我會將這個答案留給那些和我犯同樣錯誤的人。

Answer 2

如果修改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 syntax：在someFunction語法錯誤

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

還小的修正如下：

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