gpt4 book ai didi

javascript - Leaflet.js - 使用自定义 map 服务器

转载 作者:行者123 更新时间:2023-12-03 11:50:54 25 4
gpt4 key购买 nike

我一直在尝试嵌入一个自定义 map ,其中的图 block 托管在我的本地服务器上,并由 Leaflet.js 呈现。但是,我在 html 页面上显示 map 时遇到一些困难。这是屏幕截图:enter image description here

这是我的国家菲律宾在 Zoom 10 上的“假定”图片,但显示的却是这样。此外, map 图 block 是使用 Maperitive 生成​​的。希望任何人都可以在这里帮助我。这是我的代码。

<!DOCTYPE HTML>
<title>Offline Map Example</title>
<head>
<script type="text/javascript" src="../js/leaflet.js"></script>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.4.js"></script>

<script type="text/javascript">
$("#document").ready(function() {
var map = L.map('map', {
minZoom: 10,
maxZoom: 14,
zoom: 10,
center: [11.5326,122.7457]
});

L.tileLayer('http://localhost/Tiles/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <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>',
}).addTo(map);

var southWest = L.LatLng(4.22816513512253, 116.389103446625),
northEast = L.LatLng(21.6156671213737, 126.979526808346),
bounds = L.LatLngBounds(southWest, northEast);
map.setMaxBounds(bounds);

});
</script>
</head>
<body>
<div id="map" name="map" style="height: 440px; border: 1px solid #AAA;"></div>
</body>
</html>

enter image description here

非常感谢大家:)

最佳答案

您还没有包含 Leaflet 的 CSS。您需要这样做,当您这样做时,这就会起作用。

关于javascript - Leaflet.js - 使用自定义 map 服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25840416/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com