0

我正在尝试一些相当简单的事情，你可以在这里看到一个演示：http: //www.jsfiddle.net/VVe8x/19/

此错误仅出现在 Firefox 中，因此要查看它，请按其中一个链接一次（它将带您到纽约或以色列），然后按另一个链接。错误是它不会向我显示该位置的图块，而是会向我显示 div 的背景。

PS 在 Chrome 中，这可以完美运行。

我不知道这是否是一个线索，或者它可能会让你感到困惑，如果在按下纽约或以色列链接之间你按下“查看世界”链接，它将允许你看到另一个位置..

完整来源供参考

<!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>
4

2 回答 2

0

当图块不可见时，myMap_OpenLayers_Container 具有以下 CSS：

位置：绝对；z 指数：749；左：-2.02815e+7px；顶部：-2007340px；

如果你改变这些，你可以看到加载了正确的图块，所以很可能是 jsFiddle 把它们弄乱了。不显示的瓷砖 CSS 也有奇怪的值。

更新：

本地测试也会产生问题，因此排除了 jsFiddle。

解决方法是在缩放后通过调用以下函数来设置此值：

        updateCSS = function(){
            OpenLayers_Container = document.getElementById("myMap_OpenLayers_Container").style.left = "0px";
        }

这看起来像一个错误，尽管很难判断它是否在 OpenLayers 或 CloudMade 层属性中 - 我想是后者，否则它将是一个被广泛报道的错误。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";
    }
于 2010-01-27T09:43:10.367 回答
0

我也遇到了这个问题，结果我没有像我想象的那样设置地图的中心。如果您首先调用 map.setCenter()，问题就会消失。例如：

var newCenter = new OpenLayers.Lonlat(longitude, latitude)
    .transform(new OpenLayers.Projection('ESPG:4326'),
               this.map.getProjectionObject());

this.map.setCenter(newCenter);

希望这对接下来遇到问题的人有所帮助。

于 2010-12-12T23:22:49.213 回答