問題描述
這是一個(gè)我無法弄清楚的超級(jí)奇怪的問題.我的 div 帶有地圖及其 css 樣式.Leaflet 地圖顯示在一個(gè)矩形中，而不是在 div 中.好像 z 索引是錯(cuò)誤的，但我無法弄清楚.JS 在 document.ready 函數(shù)中.我在地圖 div 周圍添加了一個(gè)邊框，只是為了展示一切是如何關(guān)閉的.
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',圖標(biāo)大小:[25,40]，popupAnchor: [-3, -20],圖標(biāo)錨:[14, 38]});L.marker(x,y],{圖標(biāo):建筑圖標(biāo)，標(biāo)題:城鎮(zhèn)，州"}).bindPopup('<b>first last</b><br>Email: 電子郵件地址<br>Cell: 電話號(hào)碼').addTo(地圖);mapLink='<a href="http://openstreetmap.org">OpenStreetMap</a>';L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '地圖數(shù)據(jù)和副本;' + 地圖鏈接，最大縮放:18}).addTo(地圖);
我已經(jīng)修復(fù)了重疊問題，但最后一個(gè)問題仍然存在，即，
當(dāng)頁面加載并在 document.ready() 上呈現(xiàn)地圖時(shí)，地圖僅在屏幕的左上角可見.如果我更改瀏覽器的大小(最大化、最小化)，那么地圖會(huì)正確刷新.
解決方案 地圖打開后執(zhí)行以下函數(shù):
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.
這篇關(guān)于傳單地圖未顯示在引導(dǎo) div 中的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！
【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請(qǐng)聯(lián)系我們刪除處理，感謝您的支持！