相关疑难解决方法(0)
在选项卡式面板中未正确显示传单地图
我正在尝试使用Leaflet.js在Twitter Bootstrap的标签面板中显示一个地图,但是表现得很奇怪:
当我单击包含面板的选项卡时,地图顶部会出现灰色图层.如果我拖动并移动地图,我会看到其他瓷砖,但不是最初的瓷砖.
更奇怪的是,如果我调整浏览器的大小,突然它完美运行,直到我再次重新加载,所以我猜是css的一个问题,但我找不到问题.
此外,将地图放在选项卡式面板之外也很有效.
我在Firefox和Chrome中测试过,两者都有同样的问题.
我在jsfiddle中创建了一个测试,看它"活着":http: //jsfiddle.net/jasalguero/C7Rp8/1/
任何帮助真的很感激!
推荐指数
解决办法
查看次数
传单地图显示灰色
我正在使用快速入门启动leaflet.js,但我的地图显示为灰色...是否有我遗漏的东西？
的script.js:
var leafletMap = L.map('leafletMap').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © [...]',
maxZoom: 18
}).addTo(leafletMap);
// marker
var marker = L.marker([51.5, -0.09]).addTo(leafletMap);
style.css中:
#leafletMap {
height: 200px;
width: 200px;
}
index.html的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My title</title>
<link rel='stylesheet' href='css/bootstrap.css'>
<link rel='stylesheet' href='css/leaflet.css'>
<!--[if lte IE 8]>
<link rel="stylesheet" href="leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='leafletMap'></div>
<script src='js/libs/jquery-1.10.2.js'></script>
<script src='js/libs/bootstrap.js'></script>
<script src='js/libs/leaflet-src.js'></script> …推荐指数
解决办法
查看次数
单张地图加载半灰色瓷砖
我在div中有一个传单地图,我喜欢这样:
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
然后我有一个像这样的div:
一些加载地图的js:
map = L.map($attrs.id,
center: [40.094882122321145, -3.8232421874999996]
zoom: 5
)
L.tileLayer("http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png",
maxZoom: 18
).addTo map
然后在页面加载我有一些监视窗口高度和调整大小的JS:
$("#map").height($(window).height())
$(window).resize(_.throttle(->
$("#map").height($(window).height())
, 100
))
但是,当地图加载时,一半的灰色加载.当我调整地图大小时加载正常,但初始加载是1/2灰色
推荐指数
解决办法
查看次数
Leaflet Map未显示在bootstrap div中
这是一个我无法弄清楚的超奇怪的问题.我有我的div与地图和它的CSS风格.Leaflet地图显示在一个矩形中,而不是div中.它好像z索引是错误的,但我无法弄明白.JS位于document.ready函数中.我在地图div周围添加了一个边框,以显示一切都是如何.
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);
我已经解决了重叠问题,但最后一个问题仍然存在,即
当页面加载并且地图在地图上呈现时,document.ready()只能在屏幕的左上角看到.如果我更改浏览器的大小(最大化,最小化),则地图会正确刷新.
推荐指数
解决办法
查看次数
在调整大小之前，传单地图不会正确显示
我在 Binding.scala 上使用带有 scalajs-leaflet 外观的 Leaflet，并且地图初始化/显示不正确。
为了重现该问题，我准备了一个lihaoyi/workbench类似于 scalajs-leaflet 中的页面。
首先，从https://github.com/mcku/scalajs-leaflet下载分叉的 scalajs-leaflet
sbt在scalajs-leaflet目录中运行。输入~ example/fastOptJSsbt。现在，一个 Web 服务器在端口 12345 上启动。
在浏览器中打开 http://localhost:12345/example/target/scala-2.12/classes/leaflet2binding-dev.html
问题是地图容器出现但内容（图块等）不正确。在窗口上进行小幅调整后，地图变得很好，这会触发_onResize传单的处理程序。
容器在Leaflet2Binding.scala文件中并且在初始化之前已经指定了它的大小：
val mapElement = <div id="mapid" style="width: 1000px; height: 600px;
position: relative; outline: currentcolor none medium;"
class="leaflet-container leaflet-touch leaflet-fade-anim
leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
data:tabindex="0"></div>.asInstanceOf[HTMLElement]
可以lmap.invalidateSize(true)在返回元素之前在以下行中
插入一行https://github.com/mcku/scalajs-leaflet/blob/83b770bc76de450567ababf6c7d2af0700dd58c9/example/src/main/scala/example/Leaflet2Binding.scala , but# L3在这种情况下没有帮助。即这里：
@dom def renderMap = {
val mapElement = ... (same element as above)
.. some …推荐指数
解决办法
查看次数