我有一个带有地图的Web应用程序。我添加了一个不错的自定义地图控件,以打开和关闭地图上的不同层。目前只有两层,而且在大多数浏览器中都可以很好地工作。
除了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);
}
});
}
,因此事实证明我与CSS有关的问题。我的样式表之一是将max-width: 100%
应用于所有IMG标签。这是与地图标记/各粒线一起播放的。
现在我看到了它很明显,但是当您认为问题与JavaScript有关时,它并不那么明显。因此,我将在此处留给与我犯同样错误的其他任何人。
如果您修改 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);
}