¿Por qué el polígono no se muestra en el mapa? Estaba tratando de resaltar una ubicación específica usando un polígono pero no se muestra en el mapa a pesar de que no hay ningún error. aquí está el código:
<!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>Hay varios problemas que impiden que se muestre el mapa y la forma del polígono para cargar:
algunos pequeños errores en la fuente, causados por retornos de línea: consulte la consola del navegador para verificar y corregir estos. (Tenga en cuenta que estos pueden no existir en su fuente, pero pueden ser causados por el ajuste de línea al copiar/pegar la fuente).
El problema principal es que las coordenadas del polígono deben estar envueltas en una matriz , como se muestra en negrita en este ejemplo:
var polígono = L.polygon( [ [8.94917, 125.54361],[9.00333023, 125.48916626], [8.85280991, 125.66551208] ] ).addTo(mapa);