2012-09-19 191 views
1

此问题已被询问(请参阅“Google地图多边形”问题)。但我有完全相同的问题,只是想鼓励有人把它...Google maps API 3,关闭多边形(与“Google地图多边形”相同)

总之,你如何添加多个多边形到一个地图没有一条线出现以加入每个多边形?总之,在绘制另一个多边形之前,如何“关闭”一个多边形?

我的页面如下。正如你可以看到,如果你在浏览器中检查它,在两种状态之间会出现一条线(如果你添加更多的形状,它们也会出现与一条线相连)是否有一些简单的解决方案,或者是否需要复杂的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> 

回答

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) 
]; 
相关问题