Google Maps API 3, закрывающие многоугольники (такие же, как многоугольники Google Maps)

Этот вопрос уже задавали (см. Вопрос "Полигоны Google Maps"). Но у меня точно такая же проблема, и я просто хотел побудить кого-нибудь взяться за нее ...

Короче говоря, как добавить на карту несколько полигонов без появления линии, соединяющей каждый многоугольник? Короче говоря, как «закрыть» многоугольник перед тем, как нарисовать другой?

Моя страница внизу. Как вы можете видеть, проверив это в браузере, между двумя состояниями появляется линия (если вы добавляете больше фигур, они тоже кажутся соединенными линией). Есть ли какое-то простое решение или вам нужен сложный JS-код для обнаружения пересечений? или что-то?

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
    </style>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? key=MY_VALID_KEY_HERE&sensor=false"></script>

    <!--<script type="text/javascript" src="AAAA_State_Coordinates.js"></script>-->

    <script type="text/javascript">
        function initialize() {
            var myLatLng = new google.maps.LatLng(46, -100);
            var mapOptions = {
                zoom: 5,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

            var shape_ND = [
                new google.maps.LatLng(45.9445, -104.0446),
                new google.maps.LatLng(45.934, -96.5671),
                new google.maps.LatLng(46.3242, -96.6028),
                new google.maps.LatLng(46.6636, -96.7978),
                new google.maps.LatLng(46.8602, -96.7896),
                new google.maps.LatLng(46.9503, -96.7896),
                new google.maps.LatLng(47.13, -96.8335),
                new google.maps.LatLng(47.2345, -96.8335),
                new google.maps.LatLng(47.4132, -96.8555),
                new google.maps.LatLng(47.5469, -96.8555),
                new google.maps.LatLng(47.6506, -96.8774),
                new google.maps.LatLng(47.9918, -97.0601),
                new google.maps.LatLng(48.1267, -97.126),
                new google.maps.LatLng(48.2859, -97.1109),
                new google.maps.LatLng(48.4301, -97.1233),
                new google.maps.LatLng(48.553, -97.1425),
                new google.maps.LatLng(48.6765, -97.0999),
                new google.maps.LatLng(48.7326, -97.1356),
                new google.maps.LatLng(48.7951, -97.1727),
                new google.maps.LatLng(48.9081, -97.229),
                new google.maps.LatLng(48.9982, -97.2331),
                new google.maps.LatLng(48.9946, -104.0501)
            ];

            var shape_WY = [
                new google.maps.LatLng(48.9946, -104.0501),
                new google.maps.LatLng(44.9949, -104.0584),
                new google.maps.LatLng(44.9998, -111.0539),
                new google.maps.LatLng(40.9986, -111.0457),
                new google.maps.LatLng(41.0006, -104.0556)
            ];

            ND = new google.maps.Polygon({paths: shape_ND,strokeColor: '#FF0000',strokeOpacity: 0.8,strokeWeight: 2,fillColor: '#FF0000',fillOpacity: 0.35});
            ND.setMap(map);

            WY = new google.maps.Polygon({paths: shape_WY,strokeColor: '#FF0000',strokeOpacity: 0.8,strokeWeight: 2,fillColor: '#FF0000',fillOpacity: 0.35});
            WY.setMap(map);
        }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:70%; height:70%"></div>
</body>
</html>

google-maps javascript api google-maps-api-3 polygons
person user1684179    schedule 19.09.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы продублировали последнюю координату ND в WY, так что эта точка является частью обеих фигур. Используйте следующее для WY:

var shape_WY = [
new google.maps.LatLng(44.9949, -104.0584),
new google.maps.LatLng(44.9998, -111.0539),
new google.maps.LatLng(40.9986, -111.0457),
new google.maps.LatLng(41.0006, -104.0556)
];
person avesse    schedule 19.09.2012