屏幕覆盖在 Firefox/Chrome 的谷歌地图中被抵消

Question

如果我没有给定记录的位置数据，我会生成一些 KML，它会生成带有错误消息的屏幕叠加层。当它工作时，它看起来像这样：

在 firefox 和 chrome 的一个（一致的场景）中，它会这样做：

此页面与在 Firefox 和 Chrome 中都可以使用的另一个页面之间的区别在于，地图容器 div 位于它不工作的页面的左侧（使用position: absolute;）并设置为：@ 987654324@ 在工作的页面上。

放置此图片的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 的移动方式有关，这在某种程度上与图像的位置交互。我尝试了以下方法：

1. CSS 中的备用放置代码，因此没有效果，即使将地图移动到其他位置，图像仍然在此页面上偏移 - 让我觉得我可能偏离了轨道。
2. 加载页面后，使用 javascript 调用手动卸载和重新加载 KML 层。

Answer 1

终于找到了有问题的 CSS 设置：包装地图容器的 div 有这个设置：

text-align: center;

这显然会使屏幕叠加层相对于整个屏幕居中。如果有人对 CSS 与屏幕覆盖交互的原因有任何解释，我很想知道。希望这对其他人有帮助。

我在 MapCanvas div 的 CSS 上设置了 text-align: initial; 更正了这个问题。