我想在我的网页上显示一张 map ...为此，我有以下代码:
<!DOCTYPE html>
<html lang="fr">
<!-- HEAD -->
<head>
<meta charset="UTF-8" />
<title>Petites annonces</title>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<!-- CSS -->
<style>
<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet">
#title { text-align: center; }
#mapid { margin-left: auto; margin-right: auto; height: 180px; }
</style>
</head>
<!-- BODY -->
<body>
<h1 id="title">Petites annonces</h1>
<div id="mapid"></div>
<!-- JAVASCRIPT -->
<script type="text/javascript">
var mymap = L.map('mapid').setView([46.62, 2.39], 4);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
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);
</script>
</body>
但这是结果:
我的代码中缺少什么？ 我不明白是什么问题...我有任何解决方案。
所以，如果你能帮助我，先谢谢你。
最佳答案
乘坐<link>你的元素 <style> .
<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet">
<style>
#title { text-align: center; }
#mapid { margin-left: auto; margin-right: auto; height: 180px; }
</style>
关于javascript - leafletjs 的 map 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42629299/