Question

我在Leaflet JS映射中获取外部URL JSON文件时遇到问题。当我尝试JSON本地文件时，它可以正常运行，但是当我从远程服务器更改为外部URL时，它不会出现。

<body>

    <div id="mapRain" style="height: 95vh;"></div>
    <script>
        var map = L.map('mapRain').setView([-1.4043771, 113.7221155], 7);
        var imageBounds = [
            [-5.247572, 110.593051],
            [-9.563244, 114.948288]
        ];
        var image = null;
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGV4dmlscyIsImEiOiJjanhvczU0MnQwYTR2M21vMTJ3MW5kYnRnIn0.9P2ISjrCdk7JLPt72aQQWA', {
            maxZoom: 18,
            attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> | © <a href="http://stamet.tjilikriwut.bmkg.go.id/">BMKG Palangka Raya</a>',
            id: 'mapbox.streets'
        }).addTo(map);

        var planeIcon = L.icon({
            iconUrl: 'img/plane.png',

            iconSize: [60, 80],
            iconAnchor: [30, 80],
        });
        $(function() {
            $(document).ready(function() {
                $.ajax({
                    url: "data/aviation.json",
                    dataType: "JSON",
                    type: "GET",
                    success: function(result) {
                        var report = result.report;
                        for (i = 0; i < report.length; i++) {
                            var popup = '<strong>' + report[i].icao_id + ' ' + report[i].station_name + '</strong><br>' + report[i].observed_time + ' ' + report[i].time_zone + '<br><img src="img/symbols/' + report[i].symbol + '.png"><br><strong>Cuaca : ' + report[i].weather + '</strong><br><br><strong>Angin</strong><br>Arah (dari) : ' + report[i].wind_direction + '<br>Kecepatan (km/h): ' + report[i].wind_speed + '<br><strong>Jarak penglihatan (km)</strong> : ' + report[i].visibility + '<br><strong>Suhu (°C)</strong> : ' + report[i].temp + '<br><strong>Titik Embun (°C)</strong> : ' + report[i].dew_point + '<br><strong>Tekanan (hPa)</strong> : ' + report[i].pressure;
                            L.marker([report[i].latitude, report[i].longitude], {
                                icon: planeIcon
                            }).addTo(map).bindPopup(popup);
                        }
                    }
                });

            });
        });
    </script>

</body>

当我尝试更改外部URL时，数据没有出现

$.ajax({
url: "https://juanda.jatim.bmkg.go.id/webkantor/data/aviation.json",
dataType: "JSON",

Answer 1

欢迎使用Stakoverflow Desnug。

由于CORS策略限制，使用远程地址无法使用。如果您查看控制台，应该会看到类似Access ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource或Cross-Origin Read Blocking (CORB) blocked cross-origin response...的错误。您可以read more about CORS here。

这不是脚本或浏览器的问题，这是一种安全措施，浏览器必须避免该网站/网络应用使用其他远程网站的未授权资源。

只有网站管理员或该网站的服务器管理员才能启用“跨源资源共享”模式下的资源访问。

如果我了解您的情况，则需要依靠该网站上的更新数据。唯一的方法是设置一个服务器端脚本（例如PHP）来下载该远程json。比您可以选择将其配置为每次运行（cronjob）还是将其编码为“中间服务”（例如，您下载并提供远程json的jQuery脚本调用Aviation.php）。

如何在Leaflet JS中获取外部URL JSON

1 个答案: