получить несколько полигонов в google maps API

Question

Я использую API Google Maps для поиска домов в разных местах в городе. Все дома будут иметь маркеры, и пользователь будет рисовать несколько полигонов вокруг маркеров, исходя из его интересов.

Мне нужно проверить , что выбрали все местоположения пользователя и показать только эти маркеры на картах. С моим кодом я могу это сделать, но ударил с какой-то проблемой.

Как только пользователь нарисовал первый многоугольник, я сохраняю это в переменной, а затем объединяю его с координатами второго многоугольника и повторяю то же самое для всех многоугольники. Итак, все координаты многоугольников находятся в одном объекте. Всякий раз, когда я рисую несколько полигонов, все они связаны с полилинией, потому что я сохраняю их в одном объекте и отправляю их в mapOptions.

Как избавиться от этой проблемы? Ниже приведен код, который я использую, когда пользователь рисует многоугольник. Я хочу, чтобы все многоугольники быть независимыми друг-друга

function drawFreeHand(){ 
    //the polygon 
    poly = new google.maps.Polyline({map:map,clickable:false}); 

    //move-listener 
    var move = google.maps.event.addListener(map,'mousemove',function(e){ 
     poly.getPath().push(e.latLng); 
    }); 

    //mouseup-listener 
    google.maps.event.addListenerOnce(map,'mouseup',function(e){ 
     google.maps.event.removeListener(move); 

     var path = poly.getPath(); 
     poly.setMap(null); 

     var theArrayofLatLng = path.j; 

     var ArrayforPolygontoUse = GDouglasPeucker(theArrayofLatLng,50); 
     multi_poly = myFunction1(ArrayforPolygontoUse) 
     console.log(multi_poly); 

     var polyOptions = { 
      map: map, 
      fillColor: '#0099FF', 
      fillOpacity: 0.7, 
      strokeColor: '#AA2143', 
      strokeWeight: 2, 
      clickable: false, 
      zIndex: 1, 
      path:multi_poly, 
      editable: false 
     } 

     poly = new google.maps.Polygon(polyOptions); 
    }); 
} 

function myFunction1(myVar) { 
    if(ArrayforPolygontoUse != undefined) { 
     str1 = ArrayforPolygontoUse; 
    } 
    else { 
     var str1 = []; 
    } 
    return ArrayforPolygontoUse = $.merge(str1,myVar); 
} 

Answer 1

Полигон может принять массив массивов объектов google.maps.LatLng. Это то, что вы хотите сделать, если хотите сохранить разные пути.

function drawFreeHand(){ 
    //the polygon 
    poly = new google.maps.Polyline({map:map,clickable:false}); 

    //move-listener 
    var move = google.maps.event.addListener(map,'mousemove',function(e){ 
     poly.getPath().push(e.latLng); 
    }); 

    //mouseup-listener 
    google.maps.event.addListenerOnce(map,'mouseup',function(e){ 
     google.maps.event.removeListener(move); 

     var path = poly.getPath(); 
     poly.setMap(null); 

     var theArrayofLatLng = path.getArray(); 

     var ArrayforPolygontoUse = GDouglasPeucker(theArrayofLatLng,50); 
     if (poly && poly.getPaths) { 
      // if already has one or more paths, get the existing paths 
      multi_poly = poly.getPaths(); 
      multi_poly_path.push(ArrayforPolygontoUse); 
     } else { 
      // first path 
      multi_poly = ArrayforPolygontoUse; 
     } 

     var polyOptions = { 
      map: map, 
      fillColor: '#0099FF', 
      fillOpacity: 0.7, 
      strokeColor: '#AA2143', 
      strokeWeight: 2, 
      clickable: false, 
      zIndex: 1, 
      paths:multi_poly, 
      editable: false 
     } 

     poly = new google.maps.Polygon(polyOptions); 
    }); 
} 

proof of concept fiddle

фрагмент кода:

var geocoder; 
 
var map; 
 
var ArrayforPolygontoUse = []; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    google.maps.event.addListener(map, 'rightclick', drawFreeHand); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function drawFreeHand() { 
 
    //the polygon 
 
    poly = new google.maps.Polyline({ 
 
    map: map, 
 
    clickable: false 
 
    }); 
 

 
    //move-listener 
 
    var move = google.maps.event.addListener(map, 'mousemove', function(e) { 
 
    poly.getPath().push(e.latLng); 
 
    }); 
 

 
    //mouseup-listener 
 
    google.maps.event.addListenerOnce(map, 'mouseup', function(e) { 
 
    google.maps.event.removeListener(move); 
 

 
    var path = poly.getPath(); 
 
    poly.setMap(null); 
 

 
    var theArrayofLatLng = path.getArray(); 
 

 
    var ArrayforPolygontoUse = GDouglasPeucker(theArrayofLatLng, 50); 
 
    if (poly && poly.getPaths) { 
 
     multi_poly = poly.getPaths(); 
 
     multi_poly_path.push(ArrayforPolygontoUse); 
 
    } else { 
 
     multi_poly = ArrayforPolygontoUse; 
 
    } 
 

 
    // multi_poly = myFunction1(ArrayforPolygontoUse) 
 
    // console.log(multi_poly); 
 

 
    var polyOptions = { 
 
     map: map, 
 
     fillColor: '#0099FF', 
 
     fillOpacity: 0.7, 
 
     strokeColor: '#AA2143', 
 
     strokeWeight: 2, 
 
     clickable: false, 
 
     zIndex: 1, 
 
     paths: multi_poly, 
 
     editable: false 
 
    } 
 

 
    poly = new google.maps.Polygon(polyOptions); 
 
    }); 
 
} 
 

 

 
// from http://stackoverflow.com/questions/16121236/smoothing-gps-tracked-route-coordinates 
 

 
/* Stack-based Douglas Peucker line simplification routine 
 
    returned is a reduced google.maps.LatLng array 
 
    After code by Dr. Gary J. Robinson, 
 
    Environmental Systems Science Centre, 
 
    University of Reading, Reading, UK 
 
*/ 
 

 
function GDouglasPeucker(source, kink) 
 
    /* source[] Input coordinates in google.maps.LatLngs */ 
 
    /* kink in metres, kinks above this depth kept */ 
 
    /* kink depth is the height of the triangle abc where a-b and b-c are two consecutive line segments */ 
 
    { 
 
    var n_source, n_stack, n_dest, start, end, i, sig; 
 
    var dev_sqr, max_dev_sqr, band_sqr; 
 
    var x12, y12, d12, x13, y13, d13, x23, y23, d23; 
 
    var F = ((Math.PI/180.0) * 0.5); 
 
    var index = new Array(); /* aray of indexes of source points to include in the reduced line */ 
 
    var sig_start = new Array(); /* indices of start & end of working section */ 
 
    var sig_end = new Array(); 
 

 
    /* check for simple cases */ 
 

 
    if (source.length < 3) return (source); /* one or two points */ 
 

 
    /* more complex case. initialize stack */ 
 

 
    n_source = source.length; 
 
    band_sqr = kink * 360.0/(2.0 * Math.PI * 6378137.0); /* Now in degrees */ 
 
    band_sqr *= band_sqr; 
 
    n_dest = 0; 
 
    sig_start[0] = 0; 
 
    sig_end[0] = n_source - 1; 
 
    n_stack = 1; 
 

 
    /* while the stack is not empty ... */ 
 
    while (n_stack > 0) { 
 

 
     /* ... pop the top-most entries off the stacks */ 
 

 
     start = sig_start[n_stack - 1]; 
 
     end = sig_end[n_stack - 1]; 
 
     n_stack--; 
 

 
     if ((end - start) > 1) { /* any intermediate points ? */ 
 

 
     /* ... yes, so find most deviant intermediate point to 
 
        either side of line joining start & end points */ 
 

 
     x12 = (source[end].lng() - source[start].lng()); 
 
     y12 = (source[end].lat() - source[start].lat()); 
 
     if (Math.abs(x12) > 180.0) x12 = 360.0 - Math.abs(x12); 
 
     x12 *= Math.cos(F * (source[end].lat() + source[start].lat())); /* use avg lat to reduce lng */ 
 
     d12 = (x12 * x12) + (y12 * y12); 
 

 
     for (i = start + 1, sig = start, max_dev_sqr = -1.0; i < end; i++) { 
 

 
      x13 = (source[i].lng() - source[start].lng()); 
 
      y13 = (source[i].lat() - source[start].lat()); 
 
      if (Math.abs(x13) > 180.0) x13 = 360.0 - Math.abs(x13); 
 
      x13 *= Math.cos(F * (source[i].lat() + source[start].lat())); 
 
      d13 = (x13 * x13) + (y13 * y13); 
 

 
      x23 = (source[i].lng() - source[end].lng()); 
 
      y23 = (source[i].lat() - source[end].lat()); 
 
      if (Math.abs(x23) > 180.0) x23 = 360.0 - Math.abs(x23); 
 
      x23 *= Math.cos(F * (source[i].lat() + source[end].lat())); 
 
      d23 = (x23 * x23) + (y23 * y23); 
 

 
      if (d13 >= (d12 + d23)) dev_sqr = d23; 
 
      else if (d23 >= (d12 + d13)) dev_sqr = d13; 
 
      else dev_sqr = (x13 * y12 - y13 * x12) * (x13 * y12 - y13 * x12)/d12; // solve triangle 
 

 
      if (dev_sqr > max_dev_sqr) { 
 
      sig = i; 
 
      max_dev_sqr = dev_sqr; 
 
      } 
 
     } 
 

 
     if (max_dev_sqr < band_sqr) { /* is there a sig. intermediate point ? */ 
 
      /* ... no, so transfer current start point */ 
 
      index[n_dest] = start; 
 
      n_dest++; 
 
     } else { 
 
      /* ... yes, so push two sub-sections on stack for further processing */ 
 
      n_stack++; 
 
      sig_start[n_stack - 1] = sig; 
 
      sig_end[n_stack - 1] = end; 
 
      n_stack++; 
 
      sig_start[n_stack - 1] = start; 
 
      sig_end[n_stack - 1] = sig; 
 
     } 
 
     } else { 
 
     /* ... no intermediate points, so transfer current start point */ 
 
     index[n_dest] = start; 
 
     n_dest++; 
 
     } 
 
    } 
 

 
    /* transfer last point */ 
 
    index[n_dest] = n_source - 1; 
 
    n_dest++; 
 

 
    /* make return array */ 
 
    var r = new Array(); 
 
    for (var i = 0; i < n_dest; i++) 
 
     r.push(source[index[i]]); 
 
    return r; 
 

 
    }

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>