OpenLayers + CloudMade的奇怪错误
我正在尝试一些相当简单的东西，你可以在这里看到一个演示：http://www.jsfiddle.net/VVe8x/19/
这个bug只出现在Firefox中，所以要查看它，只需按一次其中一个链接(它会将您带到纽约或以色列)，然后再按另一个链接。错误是它不会显示该位置的磁贴，而是显示div的背景。
另外，在Chrome中，这是完美无瑕的。
我不知道这是否是一条线索，或者它可能会让你感到困惑，如果在按下NY或以色列链接之间，你按下“查看世界”链接，它将允许你看到另一个位置。
供参考的完整源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<a href="#" onclick="javascript:show1()">show me NY</a>
<a href="#" onclick="javascript:show2()">show me TLV</a>
<a href="#" onclick="javascript:map.zoomToExtent(map.getMaxExtent());">show world map(a "workaround"</a>
<div id='myMap' style="height: 600px; width: 600px; position: relative"></div>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
map = new OpenLayers.Map("myMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
]
});
var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
key: 'd5da652e33e6486ba62fca3d18ba70c9'
});
map.addLayer(cloudmade);
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
map.setCenter(new OpenLayers.LonLat(40, 32), 2);
show1 = function(){
var bound1 = new OpenLayers.Bounds(-8236567.917898,4972686.066032,-8236148.409989,4972889.624407);
map.zoomToExtent(bound1); // to NY
};
show2 = function(e){
var bound2 = new OpenLayers.Bounds(3874818.203389,3773932.267033,3875217.305962,3774226.370443);
map.zoomToExtent(bound2); // to Israel
return false;
};
</script>
</body>
</html>回答 2
Stack Overflow用户
发布于 2010-01-27 17:43:10
当磁贴不可见时，myMap_OpenLayers_Container具有以下CSS：
位置:绝对；z索引: 749；左：-2.02815e+7px；顶部：-2007340px；
如果你改变了这些，你可以看到正确的磁贴被加载了，所以很可能是jsFiddle把它们弄乱了。当tiles CSS不显示时，它们也有奇怪的值。
更新：
本地测试也会产生该问题，因此排除了jsFiddle。
修复方法是在缩放后通过调用如下函数来设置此值：
updateCSS = function(){
OpenLayers_Container = document.getElementById("myMap_OpenLayers_Container").style.left = "0px";
}这看起来像是一个bug，尽管它是在OpenLayers中还是在CloudMade层属性中很难辨别--我认为是后者，否则它将是一个被广泛报道的bug。OpenLayers.js中的相关代码似乎是：
centerLayerContainer: function(lonlat){
var originPx = this.getViewPortPxFromLonLat(this.layerContainerOrigin);
var newPx = this.getViewPortPxFromLonLat(lonlat);
if ((originPx != null) && (newPx != null)) {
this.layerContainerDiv.style.left = Math.round(originPx.x - newPx.x) + "px";
this.layerContainerDiv.style.top = Math.round(originPx.y - newPx.y) + "px";
}Stack Overflow用户
发布于 2010-12-13 07:22:49
我也遇到了这个问题，结果发现我没有像我想的那样设置地图的中心。如果首先调用map.setCenter()，这个问题就解决了。例如：
var newCenter = new OpenLayers.Lonlat(longitude, latitude)
.transform(new OpenLayers.Projection('ESPG:4326'),
this.map.getProjectionObject());
this.map.setCenter(newCenter);希望这对下一个有问题的人有所帮助。
https://stackoverflow.com/questions/2128144
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号