javascript - 使用坐标在 Google map 中创建边界区域

Question

我想使用 API v3 在 Google map 中显示区域边界。我有一个客户端覆盖区域的邮政编码列表，我已将它们转换为 LatLng 坐标，并可以用它们创建一个多边形，但正如您所期望的，它是一堆乱七八糟的线条，而不是一个实体形状区域。

有人知道这是否可能吗？如果可以，该怎么做？或者用不同的方式来做到这一点。我在下面使用的代码:

<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 55.921772, lng: -3.383983},
            scrollwheel: false,
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: true
            });

        // Define the LatLng coordinates for the polygon's path.
        var triangleCoords = [
        new google.maps.LatLng(55.948969,-3.1927988),
        new google.maps.LatLng(55.949292,-3.209399),
        new google.maps.LatLng(55.957032,-3.1850223),
        new google.maps.LatLng(55.929196,-3.2089489),
        new google.maps.LatLng(55.934519,-3.2131166),
        new google.maps.LatLng(55.924534,-3.2096679),
        new google.maps.LatLng(55.901564,-3.2035307),
        new google.maps.LatLng(55.940591,-3.2170048),
        new google.maps.LatLng(55.943847,-3.2184679),
        new google.maps.LatLng(55.932823,-3.2462462),
        new google.maps.LatLng(55.924084,-3.2938003),
        new google.maps.LatLng(55.948636,-3.3239403),
        new google.maps.LatLng(55.94727,-3.2158532),
        new google.maps.LatLng(55.946459,-3.2359557),
        new google.maps.LatLng(55.942119,-3.2790791),
        new google.maps.LatLng(55.943678,-3.2820926),
        new google.maps.LatLng(55.933458,-3.2867013),
        new google.maps.LatLng(55.907231,-3.2498242),
        new google.maps.LatLng(55.914285,-3.2391396),
        new google.maps.LatLng(55.929872,-3.2483283),
        new google.maps.LatLng(55.919613,-3.272673),
        new google.maps.LatLng(55.913635,-3.2773089),
        new google.maps.LatLng(55.953223,-3.1155757),
        new google.maps.LatLng(55.951535,-3.1124523),
        new google.maps.LatLng(55.944854,-3.1050555),
        new google.maps.LatLng(55.931274,-3.1456767),
        new google.maps.LatLng(55.938277,-3.1758846),
        new google.maps.LatLng(55.919988,-3.1677619),
        new google.maps.LatLng(55.907921,-3.1339982),
        new google.maps.LatLng(55.899518,-3.1649876),
        new google.maps.LatLng(55.955011,-3.1932569),
        new google.maps.LatLng(55.953699,-3.1905739),
        new google.maps.LatLng(55.951683,-3.2010498),
        new google.maps.LatLng(55.951121,-3.2034185),
        new google.maps.LatLng(55.877027,-3.1487295),
        new google.maps.LatLng(55.943146,-3.0559971),
        new google.maps.LatLng(55.943718,-3.047895),
        new google.maps.LatLng(55.939247,-3.0130501),
        new google.maps.LatLng(55.892996,-3.0728633),
        new google.maps.LatLng(55.89186,-3.0692661),
        new google.maps.LatLng(55.892996,-3.0728633),
        new google.maps.LatLng(55.956248,-3.4049741),
        new google.maps.LatLng(55.958401,-3.204173),
        new google.maps.LatLng(55.953391,-3.2083257),
        new google.maps.LatLng(55.947542,-3.2146128),
        new google.maps.LatLng(55.943346,-3.2109749),
        new google.maps.LatLng(55.945203,-3.2049162),
        new google.maps.LatLng(55.973614,-3.3522429),
        new google.maps.LatLng(55.959293,-2.9831886),
        new google.maps.LatLng(55.958761,-3.2259363),
        new google.maps.LatLng(55.958258,-3.2509238),
        new google.maps.LatLng(55.954508,-3.2162083),
        new google.maps.LatLng(55.969754,-3.2567425),
        new google.maps.LatLng(55.965345,-3.2713865),
        new google.maps.LatLng(55.966799,-3.2759201),
        new google.maps.LatLng(55.961259,-3.2624101),
        new google.maps.LatLng(55.960523,-3.3189479),
        new google.maps.LatLng(55.980282,-3.2222259),
        new google.maps.LatLng(55.970837,-3.2150703),
        new google.maps.LatLng(55.972055,-3.1971305),
        new google.maps.LatLng(55.977169,-3.1812151),
        new google.maps.LatLng(55.970188,-3.1726547),
        new google.maps.LatLng(55.970989,-3.1715573),
        new google.maps.LatLng(55.9706,-3.1709047),
        new google.maps.LatLng(55.969318,-3.1629671),
        new google.maps.LatLng(55.958457,-3.1835442),
        new google.maps.LatLng(55.954315,-3.1853397),
        new google.maps.LatLng(55.956023,-3.1607265),
        new google.maps.LatLng(55.955162,-3.15005),
        new google.maps.LatLng(55.950521,-3.1836543),
        new google.maps.LatLng(55.94698,-3.1866047),
        new google.maps.LatLng(55.934593,-3.1935895),
        new google.maps.LatLng(55.934464,-3.1948181),
        new google.maps.LatLng(55.930516,-3.1756174),
        new google.maps.LatLng(55.97862,-3.2535203),
        new google.maps.LatLng(55.951962,-3.1749222)
        ];


        // Construct the polygon.
        var areaCovered = new google.maps.Polygon({
          paths: triangleCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.25
        });
        areaCovered.setMap(map);


    }
    </script>

Answer 1

好的，这是我 promise 的代码示例。这将为您提供一个包含 triangleCoords 中所有点的正方形/矩形多边形。

// create new LatLngBounds
var bounds = new google.maps.LatLngBounds();

// extend bounds to contain each coordinate
for (var i = 0, i_end = triangleCoords.length; i < i_end; i++) {
    bounds.extend(triangleCoords[i]);
}

// get the NSEW corners of the bounds
var NE = bounds.getNorthEast();
var SW = bounds.getSouthWest();
var SE = { lat: SW.lat(), lng: NE.lng() };
var NW = { lat: NE.lat(), lng: SW.lng() };

// Construct the polygon.
var areaCovered = new google.maps.Polygon({
    paths: [NE, SE, SW, NW],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.25
});
areaCovered.setMap(map);

我还想澄清为什么你的代码会创建一堆困惑的行。多边形将根据您提供的坐标顺序构建其边界。要了解我在说什么，您可以将示例中的顺序更改为 paths: [NE, SW, SE, NW] 。

为了给你一个视觉效果，你可以把它想象成连点成线的游戏。如果你没有按顺序连接这些点，你最终会得到困惑的线条，而不是一个可爱的笑皮卡丘。