如何使用 Google Maps API 显示多边形？

Question

我的问题：

我正在尝试使用 Google Maps API 使用爱尔兰县边界的 geoJSON 创建一个数据层多边形。数据来自 Ordance Survey Ireland，所以我很确定我看到的问题出在我的代码中。

基本上，代码循环通过geoJSON文件添加经度和纬度点并在它们之间画一条线。当一个县完成后，它会将完整的轮廓添加到地图上并移动到下一个县。正如您所见，地图上某些点的轮廓会跳跃，但有些则完美地沿着县的边界绘制。

我已尝试直接从源 URL 加载 geoJSON，如 API 文档中所述，并且还在我的代码中使用循环，但无济于事。任何帮助将不胜感激。

这是我正在使用的 geoJSON 的链接：Counties GEOJSON

<script>
    let map;

    function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 7,
            center: {
                lat: 53.411080,
                lng: -7.710753
            },
            mapTypeId: "roadmap",
        });

        let counties = httpGet('https://jameswalshe.ie/countiesGEOJSON.geojson');
        counties = JSON.parse(counties);

        for (let s = 0; s < counties['features'].length; s++) {

            var countiesCoords = [];
            var countyName = "county" + s;

            for (let i = 0; i < counties['features'][s]['geometry']['coordinates'].length; i++) {

                for (let y = 0; y < counties['features'][s]['geometry']['coordinates'][i].length; y++) {

                    for (let z = 0; z < counties['features'][s]['geometry']['coordinates'][i][y].length; z++) {

                        countiesCoords.push({
                            lat: counties['features'][s]['geometry']['coordinates'][i][y][z][1],
                            lng: counties['features'][s]['geometry']['coordinates'][i][y][z][0]
                        });

                    }

                }

            }

            countyName = new google.maps.Polygon({
                paths: countiesCoords,
                strokeColor: "rgb(0, 139, 63)",
                strokeOpacity: 1,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0,
            });
            countyName.setMap(map);

        }

    };
</script>

Answer 1

我使用了 map.data.loadGeoJson('data.json');方法而不是从另一个域加载。