openlayers - 点击后地图不显示
问题描述
我在 div 容器中显示地图时遇到问题。当我单击 div 'fire' 时,div 'map' 显示但不显示地图。如果我放大(Chrome ctrl 和 +)地图就会出现。如果我将显示设置为阻止,则地图会加载到容器中。点击“开火”后如何使地图出现?
PHP:
echo '<div id="site"> ';
echo '<div id="map" style="width:600px;height:400px;display:none;background:red;"> ';
echo '</div>';
echo '<div id="fire" style="width:200px;height:100px;background:black;"> show me!';
echo '</div>';
echo '</div>';
JS:
var pdf_map_source_loaded_source = new ol.source.OSM();
var pdf_map_source = new ol.layer.Tile({source: pdf_map_source_loaded_source , zIndex:9999});
//*********************************************************************************
var pdf_view = new ol.View({
center: ol.proj.transform([20.328150146900917 , 51.75598647643658], 'EPSG:4326', 'EPSG:3857'),
rotation: 0,
zoom: 10
});
//*********************************************************************************
// Map
var pdf_map = new ol.Map({
target: 'map',
layers: [
pdf_map_source
]
,
view: pdf_view
});
//---------------------------------------------------- fire event ------------------------------------------------
$(document).on("click","#fire", function () {
$('#map').show(1);
});
with display: block 刷新页面后显示的地图:
echo '<div id="map" style="width:600px;height:400px;display:block;background:red;"> ';
解决方案
如果您必须在使地图 div 可见之前创建地图,请尝试
$(document).on("click","#fire", function () {
$('#map').show(1);
pdf_map.updateSize();
});
推荐阅读
- python - 同时将更改的计数器 int 变量发送到另一个 python 脚本
- python - 错误:数组的最后 2 个维度必须是正方形
- python - Django刷新页面但不重定向
- hibernate - hibernate.implicit_naming_strategy 到默认值在 LocalSessionFactoryBean 中不起作用
- python - 试图了解 img = np.zeros((300,512,3), np.uint8) 如何给我们一个黑色窗口
- xml - 如何用冒号解组 xml 元素
- reactjs - 如何在图像(图标)中单击时更新数组的状态而不在反应js中刷新页面
- pandas - 需要具有 100 万个股票数据的 pandas 优化代码
- ios - 在未运行的 SwiftUI 应用程序的情况下处理通用链接
- python - 如何在复杂元素中将键发送到python selenium中的输入标签