JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="http://jsclipper.sourceforge.net/6.1.3.1_fpoint/clipper.js"></script>
<div id="map"></div>
CSS
#map {
width: 450px;
height: 400px;
}
JavaScript
var array_polygon= new Array();
var array_clipper_polygon=[];
var cpr = new ClipperLib.Clipper();
var subj_polygons = new ClipperLib.Paths();
var solution_polygons = new ClipperLib.Paths();
var clipType = ClipperLib.ClipType.ctUnion;
var array_polygon1 = [
new google.maps.LatLng(22.615278575733523, 113.69888305664062),
new google.maps.LatLng(22.421184710331854, 113.44619750976562),
new google.maps.LatLng(22.217920166311025, 114.05731201171875),
new google.maps.LatLng(22.598797546832557, 114.04495239257812)
];
var array_polygon2 = [
new google.maps.LatLng(22.703988606693763, 113.47640991210938),
new google.maps.LatLng(22.504944902977012, 113.66317749023438),
new google.maps.LatLng(22.371666279509544, 113.19900512695312),
new google.maps.LatLng(22.669778674332324, 113.24844360351562)
]
function mergePolygon()
{
for(j=0;j<array_polygon.length;j++){
array_polygon_clipper = createarray_clipper_polygon(array_polygon[j]);
subj_polygons.push(array_polygon_clipper);
}
cpr.AddPaths(subj_polygons, ClipperLib.PolyType.ptSubject, true);
var succeeded = cpr.Execute(clipType, solution_polygons);
return solution_polygons;
}
function getpathsolution(poly){
for(i = 0; i < poly.length; i++) {
for(j = 0; j < poly[i].length; j++) {
console.log(poly[i][j].X);
console.log(poly[i][j].Y);
}
}
}
function createarray_clipper_polygon(array){
var subj_polygon = new ClipperLib.Path();
for(i=0;i<array.length;i++){
var latx =array[i].lat();
var lngx =array[i].lng();
subj_polygon.push(new ClipperLib.FPoint(latx, lngx));
}
return subj_polygon;
}
var map = new...