gpt4 book ai didi

maps - leaflet.js map 未显示

转载 作者:行者123 更新时间:2023-12-03 07:36:58 25 4
gpt4 key购买 nike

我是leaflet.js的新手。谁能帮我调试以下代码?我正在尝试在屏幕上显示 map ,但是Google Chrome浏览器上仅显示放大和缩小按钮,并且 map 屏幕为空。

<!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

您的代码中没有图块提供程序,因此 map 上没有任何显示。

查看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 &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>',
id: 'mapbox.streets'
}).addTo(mymap);

如果您不希望Mapbox中有图块,则可以使用openstreet map
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

关于maps - leaflet.js map 未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37023893/

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