1

この質問はすでに尋ねられています (質問「Google マップのポリゴン」を参照)。しかし、私はまったく同じ問題を抱えており、誰かにそれを引き受けるよう促したかっただけです...

簡単に言うと、複数のポリゴンをマップに追加し、各ポリゴンを結んでいるように見える線を表示しないようにするにはどうすればよいでしょうか? つまり、別のポリゴンを描画する前に、ポリゴンをどのように「閉じる」のですか?

私のページは以下です。ブラウザーで確認するとわかるように、2 つの状態の間に線が表示されます (さらに形状を追加すると、それらも線で接続されているように見えます) 簡単な解決策はありますか、それとも交差を検出するために複雑な 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>
4

1 に答える 1

1

WY の ND の最後の座標を複製したので、その点は両方の形状の一部です。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)
];
于 2012-09-19T20:53:54.170 に答える