2010-01-24 3 views
0

я пытаюсь что-то довольно простое, вы можете посмотреть демо здесь: http://www.jsfiddle.net/VVe8x/19/Странная ошибка с OpenLayers + CloudMade

Эта ошибка появляется только в Firefox, так, чтобы он нажать либо один из ссылок один раз (это будет отвезти вас в Нью-Йорк или Израиль), затем нажмите другую ссылку. Ошибка в том, что он не покажет мне плитки в этом месте, вместо этого он покажет мне фон div.

P.S В 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> 

ответ

0

myMap_OpenLayers_Container имеет следующий CSS, когда плитка невидимы:

позиция: абсолютная; z-индекс: 749; left: -2.02815e + 7px; наверх: -2007340px;

Если вы измените их, вы увидите, что правильные плитки были загружены, поэтому его вероятность быть jsFiddle испорчена. Плитки CSS, когда они не показывают, также имеют странные значения.

Update:

Тестирование локально производит также вопрос, так что исключает 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"; 
    } 
+0

Привет, это не ошибка с jsFiddle, у меня была эта проблема в моей среде dev, и я воспроизвел ее в jsFiddle. Css - хорошая находка, я буду изучать ее, когда у меня есть время, нужно выяснить, кто генерирует эту ошибку. Опять же, jsFiddle здесь не виноват :) У меня нет привычки развиваться сверху jsFiddle: P – 2010-01-28 09:28:26

+0

Yup, я вижу ошибку с портом представления DIV, я буду использовать ваше обходное решение! Очень ценим! – 2010-02-03 10:24:42

0

я бегу в эту проблему тоже, и оказалось, что я не заходило центрировать карту, как я думал. Проблема исчезнет, ​​если вы сначала вызовете map.setCenter(). Например:

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

this.map.setCenter(newCenter); 

Надеюсь, это поможет тем, кто в следующий раз столкнулся с проблемой.

Смежные вопросы