3
지도를 라이트 박스에로드하려고합니다. 링크가 트리거되면 라이트 박스에지도가 표시됩니다. 하지만 내가 할 때, 내가 열거 나 닫는 방화 광을 제외하고 어떤 타일은로드되지 않습니다. (이미 열렸는지 여부에 따라 다름) 실제로 방화 광뿐만 아니라 Chrome 관리자와 IE 개발자 도구도 있습니다. 같은 크기와 동일한 구조의 라이트 박스가없는 페이지에서 별도로 시도해도 모든 것이 잘 작동합니다. 그런데 OpenLayers-2.12를 사용하고 있습니다. 디버깅이나 뭐 문제가 있습니까? 그것이 맞다면 어떻게 해결할 수 있습니까?내가 열거 나 닫을 때를 제외하고는 OpenLayers의 일부 타일이로드되지 않습니다. 방화 상자
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.7.min.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
function longlat(lon,lat) {
var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
return new OpenLayers.LonLat(lon,lat).transform(fromProjection, toProjection);
}
function init_map() {
var map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
var position = longlat(28.8013,31.1711);
var zoom = 3;
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
var location = new OpenLayers.Geometry.Point(28.8013, 31.1711).transform('EPSG:4326', 'EPSG:3857');
var popup = new OpenLayers.Popup.FramedCloud('Popup',location.getBounds().getCenterLonLat(),new OpenLayers.Size(200,200),'<p>some text</p>',null,true);
var marker = new OpenLayers.Marker(longlat(28.8013,31.1711),icon.clone());
marker.events.register('click',marker,function (evt) {
map.addPopup(popup);
popup.show();
});
markers.addMarker(marker);
map.addLayer(mapnik);
map.setCenter(position, zoom);
}
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
init_map();
jQuery('#map_button').click(function() {
jQuery('.map_lightbox , .map_box , #basicMap').css('display','block');
jQuery('.map_lightbox').animate({opacity:0.8},300,'linear');
jQuery('.map_box').animate({opacity:1.0},500,'linear');
jQuery('.map_close').click(function() {
map_close();
});
jQuery('.map_lightbox').click(function() {
map_close();
});
});
});
function map_close() {
$('.map_container').children('object').remove();
$('.map_lightbox').animate({opacity:0},300,'linear',function() {
$('.map_lightbox , .map_box').css('display','none');
});
}
</script>
<style>
.map_lightbox {
position: fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000000;
opacity:0;
filter:alpha(opacity=0);
z-index: 1000;
display:none;
}
.map_box {
position:fixed;
top:20%;
left:25%;
width:600px;
height:400px;
background :#f2f2f2;
z-index:1005;
padding:10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
display:none;
}
.map_close {
cursor:pointer;
float:right;
margin-left:98%;
font-weight:bold;
}
.map_container {
margin-right:5px;
}
.map_container {
width:95%;
height:95%;
position:relative;
float:right;
margin-right:20px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-border-radius:3px;
}
</style>
</head>
<body>
<div class='map_lightbox'>
</div>
<div class='map_box'>
<div class='map_close'>x</div>
<div class='map_container'>
<div id='basicMap' style='width:100%;height:100%;display:none;position:absolute;'></div>
</div>
</div>
<a href='javascript:void(0)' id='map_button' >full map</a>
</body>
</html>
감사
같은 문제가 발생합니다. 이 문제는 https://github.com/openlayers/openlayers/issues/1257 여기에서 테스트합니다. http://jsfiddle.net/aEy3x/3/ 핸들러 내부의 이벤트에서 핸들러가 제거되고 혼란 스럽습니다. OpenLayers – GoTo
또한 라이브러리간에 충돌이있는 것처럼 보입니다. 제 경우에는 OSM 및 jQuery, OSM 및 Nokia지도 API를 사용하십시오. Nokia 맵으로 이벤트를 등록 할 때 OSM의 타일은 팬에서로드를 중지합니다. OSM지도와 Nokia지도는 별도의 사업부에 있습니다. – GoTo