javascript - 传单地图的引导 4 模态问题
问题描述
当我在引导程序 4 模式中使用传单地图时,我遇到了问题。
地图无法正确渲染,我不知道如何修复它。
这是我的地图脚本:
var url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var attr = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(url, {
maxZoom: 18,
attribution: attr
});
var map = L.map('mapId').setView([35.6892, 51.3890], 10).addLayer(osm);
map.on('click', onMapClick);
var markers = [];
function onMapClick(e) {
var geojsonFeature = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [e.latlng.lat, e.latlng.lng]
}
}
if (markers.length > 0) {
map.removeLayer(markers.pop());
}
var marker;
document.getElementById('latitude').value = e.latlng.lat;
document.getElementById('longitude').value = e.latlng.lng;
L.geoJson(geojsonFeature, {
pointToLayer: function (feature, latlng) {
marker = L.marker(e.latlng, {
riseOnHover: true,
draggable: true,
});
markers.push(marker);
return marker;
}
}).addTo(map);
}
我正在寻找解决方案来解决它::
这是我的引导模式代码:
<div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mapModalLabel">انتخاب موقعیت مکانی ملک از روی نقشه:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="mapId"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-sm">ثبت</button>
</div>
</div>
</div>
</div>
解决方案
我找到了:
<script>
$('#mapModal').on('shown.bs.modal', function(){
setTimeout(function() {
map.invalidateSize();
}, 10);
});
推荐阅读
- google-sheets - 如何使用查询(Google 表格)连接字符串并多次选择相同的列
- kubernetes - 应用程序容器在 Sidecar 准备好之前无法访问网络
- ractivejs - 如何在 Ractive.js 中绑定变量 window['array[element]']?
- java - 用jsp上传图片到服务器
- oracle - 根据逗号分隔的 id 获取名称
- python - “contextlib.redirect_stdout”不适用于 Ipython
- ios - 如何在 Chatto 中为发送和接收的消息(如 whatsapp)添加时间戳
- javascript - 使用 create-react-app 创建新 React 组件的最佳方法
- web - Instagram 在网站中显示公共主题标签内容
- database - Xamarin:阻止其他应用访问 Easy Table