0

如果我没有给定记录的位置数据，我会生成一些 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 的移动方式有关，这在某种程度上与图像的位置交互。我尝试了以下方法：

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

1 回答 1

0

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

text-align: center;

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

我text-align: initial;在 MapCanvas div 的 CSS 上设置了一组更正了这一点。

于 2013-05-16T16:03:20.257 回答