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

Posted 2023-02-23

【中文标题】如何使用 Google Maps API 显示多边形？

【英文标题】：How to display polygon with Google Maps API?

【发布时间】：2021-10-13 00:26:21

【问题描述】：

我的问题：

我正在尝试使用 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>

【问题讨论】：

你的 javascript 控制台说什么？ httpGet 是什么？您需要提供允许重现问题的minimal reproducible example，以及调试详细信息。

您的评论“当一个县完成后，它会将完整的轮廓添加到地图中并移动到下一个县。”与代码不匹配 - “县”循环是 z 循环所以我希望在那个循环之后添加多边形。就目前而言，一个县的末端与下一个县“相连”，这导致了一些不稳定的线路。

【参考方案1】：

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