如果我没有给定记录的位置数据，我会生成一些 KML，它会生成带有错误消息的屏幕叠加层。当它工作时，它看起来像这样：
在 Firefox 和 chrome 的一个（一致场景）中，它改为这样做：
这个和另一个在 Firefox 和 Chrome 中都可以工作的页面之间的区别在于，地图容器 div 位于它不工作的页面的左侧（使用position: absolute;）并设置为：float: right;在工作的页面上.
放置此图像的 KML 相关部分是：
<ScreenOverlay>
<Icon>
<href>http://SomeURL.com/image.png</href>
</Icon>
<overlayXY x="0.5" xunits="fraction" y="0.5" yunits="fraction" />
<screenXY x="0.5" xunits="fraction" y="0.5" yunits="fraction" />
<size x="0" xunits="pixels" y="0" yunits="pixels" />
</ScreenOverlay>
谷歌地图设置/初始化：
function initialize() {
var latlng = new google.maps.LatLng(64, -117);
var settings = {
zoom: 4,
maxZoom: 10,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("MapCanvas"), settings);
var geoLayer = new google.maps.KmlLayer('@Model.KMLURL');
geoLayer.setMap(map);
}
有效的页面上的 div：
div#MapCanvas {
float: right;
border: 2px solid #666666;
width: 400px;
height: 300px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div#MapContainer {
float: right;
width: 400px;
height: 300px;
margin-bottom: 10px;
}
div 在它不起作用的页面上：
div#MapCanvas {
border: 2px solid #666666;
width: 400px;
height: 300px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div#MapContainer {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 300px;
padding: 5px;
}
我最好的猜测是，这与页面加载时 div 的移动方式有关，这在某种程度上与图像的位置交互。我尝试了以下方法：
- CSS中的备用放置代码，所以没有效果，即使它将地图移动到其他地方，图像仍然在此页面上偏移 - 让我觉得我可能会偏离轨道。
- 加载页面后，使用 javascript 调用手动卸载和重新加载 KML 层。