問題描述
這是一個我無法弄清楚的超級奇怪的問題.我的 div 帶有地圖及其 css 樣式.Leaflet 地圖顯示在一個矩形中，而不是在 div 中.好像 z 索引是錯誤的，但我無法弄清楚.JS 在 document.ready 函數中.我在地圖 div 周圍添加了一個邊框，只是為了展示一切是如何關閉的.
CSS:
#map {width:100%;height:100%;margin-left:10px;margin-top:40px}HTML:
JS:
var map=L.map('map',{最小縮放:2，最大縮放:18}).setView([x,y],16);var buildingIcon=L.icon({iconUrl:'/images/bicon.png',圖標大小:[25,40]，popupAnchor: [-3, -20],圖標錨:[14, 38]});L.marker(x,y],{圖標:建筑圖標，標題:城鎮，州"}).bindPopup('<b>first last</b><br>Email: 電子郵件地址<br>Cell: 電話號碼').addTo(地圖);mapLink='<a href="http://openstreetmap.org">OpenStreetMap</a>';L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '地圖數據和副本;' + 地圖鏈接，最大縮放:18}).addTo(地圖);
我已經修復了重疊問題，但最后一個問題仍然存在，即，
當頁面加載并在 document.ready() 上呈現地圖時，地圖僅在屏幕的左上角可見.如果我更改瀏覽器的大小(最大化、最小化)，那么地圖會正確刷新.
解決方案 地圖打開后執行以下函數:
map.invalidateSize();
這將解決您的問題.
This is a super odd problem that I can not figure out. I have my div with the map and its css styling. The Leaflet map is showing up in one rectangle and not in the div. Its as if the z index is wrong, but I can not figure it out.
The JS is in the document.ready function. I added a border around the map div just to show how off everything is.
CSS:
#map {width:100%;height:100%;margin-left:10px;margin-top:40px}
HTML:
<div id="showTravel" class="row" style="display:none">
<div class="col-lg-12">
<div class="wrapper wrapper-content">
<h2 style="margin-top:-18px">All Travelers</h2>
<div id="travelContent">
<div id=map></div>
</div>
</div>
</div>
</div>
JS:
var map=L.map('map',{
minZoom:2,
maxZoom:18
}).setView([x,y],16);
var buildingIcon=L.icon({
iconUrl:'/images/bicon.png',
iconSize:[25,40],
popupAnchor: [-3, -20],
iconAnchor: [14, 38]
});
L.marker(x,y],{
icon:buildingIcon,
title:'town, state'
})
.bindPopup('<b>first last</b><br>Email: email address<br>Cell: phone number')
.addTo(map);
mapLink='<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + mapLink,
maxZoom:18
}).addTo(map);
I have fixed the overlapping problem, but the last problem still exists i.e.,
When the page loads and the map is rendered on the document.ready() the map is only visible in the top left corner of the screen. And If I changes the size of the browser (maximize,minimize) then the map refreshes correctly.
解決方案 Execute the following function once the map is opened:
map.invalidateSize();
This will fix your problem.
這篇關于傳單地圖未顯示在引導 div 中的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！