我一直在尝试让 Leaflet（一个网络地图 API）工作几个小时。起初我犯了一个错误，试图做太多事情，现在我只是试图让基本的例子发挥作用。
这是我的代码（HTML 和 Javascript）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="./leaflet.css" />
<script type="text/javascript">
function initmap(){
var map1 = L.map('map');
//map1.setView([38.642433, -90.255372]),9); //Thanks!
map1.setView([38.642433, -90.255372],9);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map1);
}
</script>
<style>
#map {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
top: 0;
z-index: 0;
}
</style>
<!-- Without this styling to set the map dimension, the tiles will get downloaded, but nothing will display on the map div! Thank you choz for answering this question! -->
</head>
<body onload="initmap()">
<div id='map'></div>
</body>
</html>
摘要：我首先得到“missing ; before statements”和“Reference Error: initmap not Defined”。根据 choz 的第一条评论，通过删除地图定义中的额外括号来解决这个问题。
然后我遇到了地图未显示的问题，即使正在下载图块。 Choz 再次评论了地图所需的样式。我在上面包含了工作代码。
您可能忘记设置尺寸#map。这是一个非常基本的示例，说明如何让它工作。
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map("map").setView([39.50, -98.35], 5);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
#map {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
top: 0;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<div id='map'></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
