leaflet.js 地图未显示
leaflet.js map is not showing up
我是 leaflet.js
的新手。谁能帮我调试下面的代码?我试图在屏幕上显示地图,但 Google Chrome 上只显示放大和缩小按钮,地图屏幕是空的。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<style>
#mapid { height: 180px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
</script>
</body>
</html>
这是您更正后的代码:http://plnkr.co/edit/E7dw2AuNbLneYpz51Qdi?p=preview
您的代码中没有切片提供程序,因此您的地图中没有显示任何内容。
查看 http://leafletjs.com/examples/quick-start-example.html
的来源
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
如果您不想使用 mapbox 中的图块,可以使用 openstreet 地图
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
重读Leaflet quick-start tutorial,特别是这一点:
It’s worth noting that Leaflet is provider-agnostic, meaning that it doesn’t enforce a particular choice of providers for tiles, and it doesn’t even contain a single provider-specific line of code.
Leaflet 不添加任何默认地图数据。您可以告诉 Leaflet 您要显示哪些数据(矢量特征、切片图层)。
如果像我一样的其他人来这里寻找 Leaflet 未显示原因的答案,我发现 Chrome 不会显示我的地图,除非我设置 div 的宽度,以及身高。
如前所述,这不是 OP 案例中的主要问题,但他们的代码也缺少宽度规范。
我是 leaflet.js
的新手。谁能帮我调试下面的代码?我试图在屏幕上显示地图,但 Google Chrome 上只显示放大和缩小按钮,地图屏幕是空的。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<style>
#mapid { height: 180px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
</script>
</body>
</html>
这是您更正后的代码:http://plnkr.co/edit/E7dw2AuNbLneYpz51Qdi?p=preview
您的代码中没有切片提供程序,因此您的地图中没有显示任何内容。
查看 http://leafletjs.com/examples/quick-start-example.html
的来源var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
如果您不想使用 mapbox 中的图块,可以使用 openstreet 地图
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
重读Leaflet quick-start tutorial,特别是这一点:
It’s worth noting that Leaflet is provider-agnostic, meaning that it doesn’t enforce a particular choice of providers for tiles, and it doesn’t even contain a single provider-specific line of code.
Leaflet 不添加任何默认地图数据。您可以告诉 Leaflet 您要显示哪些数据(矢量特征、切片图层)。
如果像我一样的其他人来这里寻找 Leaflet 未显示原因的答案,我发现 Chrome 不会显示我的地图,除非我设置 div 的宽度,以及身高。 如前所述,这不是 OP 案例中的主要问题,但他们的代码也缺少宽度规范。