Question

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

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

我的页面如下。正如您所看到的，如果您在浏览器中检查它，两个状态之间会出现一条线（如果您添加更多形状，它们也显示为与线连接）是否有一些简单的解决方案，或者您是否需要复杂的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>

Answer 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)
];

谷歌地图API 3，关闭多边形（与“谷歌地图多边形”相同）

1 个答案: