使用Google Maps API合并多边形

时间:2017-07-21 14:42:59

标签: javascript jquery google-maps google-maps-api-3

如下所示,我有两个带边的多边形。基本上是2个三角形及其各自的坐标。参见:



function initialize() {
  // Define the LatLng coordinates for the polygon's path.
  var bounds = new google.maps.LatLngBounds();
  var i;

  var polygonCoords = [
     new google.maps.LatLng(25.774252, -80.190262),
     new google.maps.LatLng(18.466465, -66.118292),
     new google.maps.LatLng(32.321384, -64.757370)
  ];
  

  for (i = 0; i < polygonCoords.length; i++) {
     bounds.extend(polygonCoords[i]);
  }

  var map = new google.maps.Map(document.getElementById("map_canvas2"), {
    zoom: 4,
    center: bounds.getCenter(),
    mapTypeId: "roadmap"
  });


  var triangle1 = new google.maps.Polygon({
    paths: polygonCoords,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangle1.setMap(map);
  
  var polygonCoords2 = [
     new google.maps.LatLng(25.774252, -80.190262),
     new google.maps.LatLng(18.466465, -66.118292),
     new google.maps.LatLng(14.979063, -83.500871)
  ];

  var triangule2 = new google.maps.Polygon({
    paths: polygonCoords2,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangule2.setMap(map);
  
}
&#13;
#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
&#13;
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="initialize()">
  <div id="map_canvas2" style="height: 100vh; width:100vw"></div>
</body>
&#13;
&#13;
&#13;

我想合并两个三角形,这样风险就不会出现在两者之间的中间,从而形成一个有4边或4坐标的多边形。最好的方法是什么?

1 个答案:

答案 0 :(得分:0)

也许您可以合并数组并删除重复项?类似的东西:

var newPolygon = polygonCoords.concat(polygonCoords2);

然后删除重复的坐标(我从this帖子中获取此代码):

var sorted_arr = newPolygon.slice().sort(); // You can define the comparing function here. 
                                     // JS by default uses a crappy string compare.
                                     // (we use slice to clone the array so the
                                     // original array won't be modified)
var results = [];
for (var i = 0; i < newPolygon.length - 1; i++) {
    if (sorted_arr[i + 1] == sorted_arr[i]) {
        results.push(sorted_arr[i]);
    }
}

然后将paths: polygonCoords,替换为paths: results,