1

这个问题已经问过了（见问题“谷歌地图多边形”）。但我有完全相同的问题，只是想鼓励某人接受它......

简而言之，如何将多个多边形添加到地图中而不会出现一条线来连接每个多边形？简而言之，如何在绘制另一个多边形之前“关闭”一个多边形？

我的页面在下面。如您所见，如果您在浏览器中查看，则在两种状态之间出现一条线（如果您添加更多形状，它们也似乎与一条线相连）是否有一些简单的解决方案，或者您是否需要复杂的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 回答