JavaScript：多边形未在地图上显示
为什么多边形未在地图上显示？我试图使用多边形突出显示特定位置，但即使没有错误，也没有在地图上显示。这是代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<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>
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="map">
<a href="https://www.maptiler.com"
style="position:absolute;left:10px;bottom:10px;z-index:999;"><img
src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
</div>
<p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a
href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap
contributors</a></p>
<script>
var map = L.map('map').setView([8.94917, 125.54361], 12);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?
key=aLd1dKi19JrBFCzDze2p',{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\"
target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca
href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy;
OpenStreetMap contributors\u003c/a\u003e",
crossOrigin: true
}).addTo(map);
var polygon = L.polygon([8.94917, 125.54361],[9.00333023, 125.48916626],
[8.85280991, 125.66551208]).addTo(map);
</script>
</body>
</html>
Why polygon not showing on the map? I was trying to highlight a specific location using polygon but it is not showing on the map even though there is no error. here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<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>
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="map">
<a href="https://www.maptiler.com"
style="position:absolute;left:10px;bottom:10px;z-index:999;"><img
src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
</div>
<p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a
href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap
contributors</a></p>
<script>
var map = L.map('map').setView([8.94917, 125.54361], 12);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?
key=aLd1dKi19JrBFCzDze2p',{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\"
target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca
href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy;
OpenStreetMap contributors\u003c/a\u003e",
crossOrigin: true
}).addTo(map);
var polygon = L.polygon([8.94917, 125.54361],[9.00333023, 125.48916626],
[8.85280991, 125.66551208]).addTo(map);
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有几个问题可以防止地图显示显示，而多边形形状用于加载：
源中的一些小错误，是由线返回引起的：请参阅浏览器控制台检查和纠正这些错误。 （请注意，这些可能不存在于您的源中，但可能是由复制/粘贴源时的线包装引起的）。
主要问题是多边形坐标应包裹在数组中，如本示例中的粗体所示：
var polygon = l.polygon（ [ [8.94917，125.54361]，[9.00333023，125.48916626]，[8.85280991，125.66551208]
There are several issues that prevent the map from displaying, and the polygon shape for loading:
some small errors in source, caused by line returns: see browser console to check and correct these. (note these might not exist in your source, but may be caused by line wrapping when copy/pasting the source).
Main issue is that the polygon coordinates should be wrapped in an array, as shown in bold in this example :
var polygon = L.polygon( [ [8.94917, 125.54361],[9.00333023, 125.48916626], [8.85280991, 125.66551208] ] ).addTo(map);