Загружено событие пожара после полигона

Question

После того, как я проверил весь день, я не нашел ответа.

Так возникает проблема:
У меня есть карта Google, на которой пользователь может рисовать. После этого пользователь может сохранить его на сервере. Он работает нормально. Вот код рисования:

var drawingManager; 
var selectedShape; 
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; 
var selectedColor; 
var colorButtons = {}; 
var all_overlays = []; 
var coordinates; 
var polygon; 
var globalGoogleSelectedColor; 
var globalGooglePinWidth; 
var map; 
coordObj = new Object(); 

function clearSelection() 
{ 
    if (selectedShape) 
    { 
    deleteAllLastShape(); 
    selectedShape.setEditable(false); 
    selectedShape = null; 
    deleteObjectContent(coordObj); 
    } 
} 

function setSelection(shape) 
{ 
    clearSelection(); 
    selectedShape = shape; 
    shape.setEditable(true); 
    selectColor(shape.get('fillColor') || shape.get('strokeColor')); 
} 

function deleteAllShape() 
{ 
    console.log("deleteAllShape"); 
    deleteObjectContent(coordObj); 

    for (var i=0; i < all_overlays.length; i++) 
    { 
    all_overlays[i].overlay.setMap(null); 
    } 

    all_overlays = []; 
} 

function deleteAllLastShape() 
{ 
    var myLenth = all_overlays.length; 

    if(myLenth > 1) 
    { 
    all_overlays[0].overlay.setMap(null); 
    all_overlays = _.rest(all_overlays); 
    } 
} 

function deleteSelectedShape() 
{ 
    if (selectedShape) 
    { 
    selectedShape.setMap(null); 
    deleteObjectContent(coordObj); 
    } 
} 

function selectColor(color) 
{ 
    selectedColor = color; 
    globalGoogleSelectedColor = selectedColor; 
    globalGooglePinWidth = 2; //only for Database 

    for (var i = 0; i < colors.length; ++i) 
    { 
    var currColor = colors[i]; 
    colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; 
    } 

    // Retrieves the current options from the drawing manager and replaces the 
    // stroke or fill color as appropriate. 
    var polylineOptions = drawingManager.get('polylineOptions'); 
    polylineOptions.strokeColor = color; 
    drawingManager.set('polylineOptions', polylineOptions); 

    var rectangleOptions = drawingManager.get('rectangleOptions'); 
    rectangleOptions.fillColor = color; 
    drawingManager.set('rectangleOptions', rectangleOptions); 

    var circleOptions = drawingManager.get('circleOptions'); 
    circleOptions.fillColor = color; 
    drawingManager.set('circleOptions', circleOptions); 

    var polygonOptions = drawingManager.get('polygonOptions'); 
    polygonOptions.fillColor = color; 
    drawingManager.set('polygonOptions', polygonOptions); 
} 

function setSelectedShapeColor(color) 
{ 
    if (selectedShape) 
    { 
    if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) 
    { 
     selectedShape.set('strokeColor', color); 
    } 
    else 
    { 
     selectedShape.set('fillColor', color); 
    } 
    } 
} 

function makeColorButton(color) 
{ 
    var button = document.createElement('span'); 
    button.className = 'color-button'; 
    button.style.backgroundColor = color; 
    google.maps.event.addDomListener(button, 'click', function() { 
    selectColor(color); 
    setSelectedShapeColor(color); 
    }); 

    return button; 
} 

function buildColorPalette() 
{ 
    var colorPalette = document.getElementById('color-palette'); 

    for (var i = 0; i < colors.length; ++i) 
    { 
    var currColor = colors[i]; 
    var colorButton = makeColorButton(currColor); 
    colorPalette.appendChild(colorButton); 
    colorButtons[currColor] = colorButton; 
    } 

    selectColor(colors[0]); 
} 

function initializeAreas() 
{ 
    map = new google.maps.Map(document.getElementById('mapBaugebieteDiv'), 
    { 
     zoom: 15, 
     center: new google.maps.LatLng(48.758961357888516,8.240861892700195), 
     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DEFAULT, 
     mapTypeIds: [ 
     google.maps.MapTypeId.ROADMAP, 
     google.maps.MapTypeId.TERRAIN, 
     google.maps.MapTypeId.SATELLITE, 
     google.maps.MapTypeId.HYBRID 
     ]}, 
     disableDefaultUI: false, 
     zoomControl: true, 
     scaleControl: true, 
     mapTypeControl: true, 
     streetViewControl: true, 
     rotateControl: true 
    }); 

    var polyOptions = 
    { 
     strokeWeight: 0, 
     fillOpacity: 0.45, 
     editable: true 
    }; 

    // Creates a drawing manager attached to the map that allows the user to draw 
    // markers, lines, and shapes. 
    drawingManager = new google.maps.drawing.DrawingManager(
    { 
     drawingMode: google.maps.drawing.OverlayType.POLYGON, 
     drawingControl: true, 
     drawingControlOptions: { 
     position: google.maps.ControlPosition.TOP_CENTER, 
     drawingModes: [ 
      // google.maps.drawing.OverlayType.MARKER, 
      // google.maps.drawing.OverlayType.CIRCLE, 
      google.maps.drawing.OverlayType.POLYLINE, 
      // google.maps.drawing.OverlayType.RECTANGLE, 
      google.maps.drawing.OverlayType.POLYGON 
      ] 
     }, 
     markerOptions: 
     { 
     draggable: true 
     }, 
     polylineOptions: 
     { 
     editable: true 
     }, 
     rectangleOptions: polyOptions, 
     circleOptions: polyOptions, 
     polygonOptions: polyOptions, 
     map: map 
    }); 

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) 
    { 
     // Push the overlay onto an array (all_overlays): 
     all_overlays.push(e); 
     deleteAllLastShape(); 

     if (e.type != google.maps.drawing.OverlayType.MARKER) 
     { 
     // Switch back to non-drawing mode after drawing a shape. 
     drawingManager.setDrawingMode(null); 

     // Add an event listener that selects the newly-drawn shape when the user 
     // mouses down on it. 
     var newShape = e.overlay; 
     newShape.type = e.type; 

     google.maps.event.addListener(newShape, 'click', function() 
     { 
      setSelection(newShape); 
     }); 
     setSelection(newShape); 
     } 
    }); 

    // Clear the current selection when the drawing mode is changed, or when the 
    // map is clicked. 
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); 
    google.maps.event.addListener(map, 'click', clearSelection); 
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); 
    google.maps.event.addDomListener(document.getElementById('delete-all-button'), 'click', deleteAllShape); 

    /////////////////////////////////////// 
    // Polylgon 
    /////////////////////////////////////// 
    google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) 
    { 
     var shapeType = 'polygon'; 
     google.maps.event.addListener(polygon.getPath(), 'insert_at', function() 
     { 
     // New point 
     coordinates = (polygon.getPath().getArray()); 
     showObjectContent(coordinates); 
     coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
     }); 

     google.maps.event.addListener(polygon.getPath(), 'remove_at', function() 
     { 
     // Point was removed 
     coordinates = (polygon.getPath().getArray()); 
     coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
     }); 

     google.maps.event.addListener(polygon.getPath(), 'set_at', function() 
     { 
      // Point was moved 
      coordinates = (polygon.getPath().getArray()); 
      coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
     }); 

     google.maps.event.addListener(polygon, 'dragend', function() 
     { 
     // Polygon was dragged 
     coordinates = (polygon.getPath().getArray()); 
     coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
     }); 

     coordinates = (polygon.getPath().getArray()); 
     coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
    }); 

    /////////////////////////////////////// 
    // Polyline 
    /////////////////////////////////////// 
    google.maps.event.addListener(drawingManager, 'polylinecomplete', function (polygon) 
    { 
     var shapeType = 'polyline'; 
     google.maps.event.addListener(polygon.getPath(), 'insert_at', function() 
     { 
     // New point 
     coordinates = (polygon.getPath().getArray()); 
     coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
     }); 

     google.maps.event.addListener(polygon.getPath(), 'remove_at', function() 
     { 
     // Point was removed 
     coordinates = (polygon.getPath().getArray()); 
     coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
     }); 

     google.maps.event.addListener(polygon.getPath(), 'set_at', function() 
     { 
     // Point was moved 
     coordinates = (polygon.getPath().getArray()); 
     coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
     }); 

     google.maps.event.addListener(polygon, 'dragend', function() 
     { 
     // Polygon was dragged 
     coordinates = (polygon.getPath().getArray()); 
     coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
     }); 
     coordinates = (polygon.getPath().getArray()); 
     coordObj = getCoordinatesOfPolygon(polygon,shapeType); 
    }); 

    buildColorPalette(); 
} 

google.maps.event.addDomListener(window, 'load', initializeAreas); 

Но большая проблема, после перезагрузки LAT/LNG с сервера и рисунок его на карте, прослушиватель события не знает о новом полигоне:

function fillBuildingForm(getData) 
{ 
    var coord = getData['buildings']; // coordinates from the server 

    if(typeof coord[0] !== 'undefined') 
    { 
    var shapeType = coord[0]['shapeType']; 
    var color = coord[0]['color']; 
    var strokeOpacity = coord[0]['opacity']; 
    var strokeWeight = coord[0]['linewidth']; 
    var numberOfCoord = getObjectSize(coord); 
    var flightPlanCoordinates = new Array(); 

    for (var i = 0; i < numberOfCoord; i++) 
    { 
     thisCoord = new Object(); 
     thisCoord['lat']=parseFloat(coord[i]['lat']); 
     thisCoord['lng']=parseFloat(coord[i]['lng']); 
     flightPlanCoordinates.push(thisCoord); 
    }; 

    var bermudaTriangle = new google.maps.Polygon(
    { 
     paths: flightPlanCoordinates, 
     strokeColor: color, 
     strokeOpacity: strokeOpacity, 
     strokeWeight: strokeWeight, 
     fillColor: color, 
     fillOpacity: 0.35, 
     // bounds: flightPlanCoordinates, 
     editable: true, 
     draggable: true 
    }); 

    bermudaTriangle.setMap(map); //now its drawing at the map 
    } 
} 

Вы можете видеть, до сих пор, это работает отлично:

Но пользователь может изменить многоугольник и хочет, чтобы сохранить новый измененный многоугольник на сервере. Слушатель:

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) 

Не распознает, что многоугольник был нарисован. И поэтому слушатель не распознает, когда пользователь меняет многоугольник. Таким образом, координат нет в all_overlays [i]. Слушатель распознает, когда многоугольник рисуется вручную, но не так, как показано выше, когда он рисуется автоматически.

Вопрос: Как я могу отправить автоматически нарисованные координаты полигона на объект «карта»? В качестве альтернативы, как я могу запустить событие «polygoncomplete», чтобы он распознал новый многоугольник?

Другая идея, которую у меня была: Запустить событие щелчка мыши на карте с координатами, чтобы слушатель узнал, что карта изменилась. Но, к сожалению, это не сработало.

Есть ли у кого-нибудь идеи, как решить эту проблему?

Answer 1

Существует не так много возможностей, как событие «polygon_load _complete» недоступно. Одно из предложений заключается в том, чтобы использовать тот факт, что для работы на многоугольнике вы должны щелкнуть по нему. Если вам нужно управлять ситуацией, когда полигон загружается с сервера, а пользователь меняет форму/координаты. Вы можете добавить слушатель по щелчку на каждый полигон во время фазы загрузки ..

для каждого полигона фазы загрузки ..

var aPoly = new google.maps.Polygon({ 
    paths:myPaths, 
    ....... 
}); 


google.maps.event.addListener(aPoly, 'click', function (event) { 
    console.log('This polygon contain : ' + this.paths + ' coords point '); 
    }); 

Таким образом, вы можете intecept щелчка на полигоне для управления вашей потребности

Answer 2

Ваша идея была хорошим намерением, но не окончанием решения. Но спасибо за ваш намек. Из-за вашего ответа я смог найти способ.

Как правило, мы должны думать, что объект bermudaTriangle должен иметь свойство «пути». Но так не получается.

Для получения координат загруженного Poly (загруженного с сервера) существует функция google-map, такая как «getPath()» или «getPaths()». Кажется, что оба метода работают.

Обратите внимание: я изменил имя с 'bermudaTriangle' на 'globalLoadedPoly'.

Таким образом, решение в сочетании с вышеприведенным кодом Теперь дополнительно:

1. Создание глобальной переменной:

   var globalLoadedPoly; 
   

   (глобальная не надо, но я сделал это таким образом, для дальнейшего действия)

2. Получение пути по функции для слушателей:

   var thisPolyPath = globalLoadedPoly.getPath(); 
   

3. Прослушивание событий, когда загружен поли изменилась:

   google.maps.event.addListener(thisPolyPath, 'set_at', thisPolyHasChanged); 
   google.maps.event.addListener(thisPolyPath, 'insert_at', thisPolyHasChanged); 
   

4.In функции, thisPolyHasChanged(), установка загруженной поли качестве фактического отбора, с помощью функции setSelection (форма). И получать координаты с помощью вызова функции getCoordinatesOfLoadedPolygon

function thisPolyHasChanged() 
{ 
    // Setting the loaded poly as the new selection 
    // Yes, it's global, so therefore not necessary to be sent 
    // but like this way, it's more readable 
    setSelection(globalLoadedPoly); 

    // If you want to get the coordinates for saving 
    // Calling the function getCoordinatesOfLoadedPolygon 
    // For being more readable I send the global Object - yes, it's not necessary 
    coordObj = getCoordinatesOfLoadedPolygon(globalLoadedPoly,'polygon'); 
    // do something with coordObj 
    // ... 
} 

    function setSelection(shape) 
    { 
    // clearSelection is in the code I postet as the question 
    clearSelection(); 
    selectedShape = shape; // setting the loaded poly as the actual poly 
    shape.setEditable(true); // making the loaded poly editable 
    selectColor(shape.get('fillColor') || shape.get('strokeColor')); //setting the color 
    } 

function getCoordinatesOfLoadedPolygon(getPolygon,shapeType) 
{ 
    // getLength is also a google-maps function/method 
    var objSize = getPolygon.getPath().getLength(); 
    for (var i = 0; i < objSize; i++) 
    { 
    // getArray is a google-maps function/method too 
    var thisLat = getPolygon.getPath().getArray()[i].lat(); 
    var thisLng = getPolygon.getPath().getArray()[i].lng(); 
    coordObj[i]=new Object(); 
    coordObj[i]['lat']=thisLat; 
    coordObj[i]['lng']=thisLng; 
    coordObj[i]['shapeType']=shapeType; 
    }; 
    return coordObj; 
} 

Наконец, если вы итерация объекта «coordObj» и сделать console.log в поджигатель, он выглядит следующим образом:

0 Object { lat=51.25572693191116, lng=9.136230200529099, shapeType="polygon"} 

1 Object { lat=51.80250070611026, lng=13.069335669279099, shapeType="polygon"} 

2 Object { lat=49.958995050387585, lng=10.476562231779099, shapeType="polygon"} 

Вывод:

Если вы хотите, чтобы получить координаты или другие свойства объекта Google-карты, используют собственные Google-Maps функции/методы:

// For getting the coordinates you are generally working with: 
yourMapObject.getPath(); 
//or 
yourMapObject.getPaths(); 

// Getting especially the latitude: 
var latitude = yourMapObject.getPath().getArray()[i].lat(); 
// Getting especially the longitude: 
var longitude = yourMapObject.getPath().getArray()[i].lng(); 

// Getting the number of coordinates 
yourMapObject.getPath().getLength(); 

Не забудьте перебрать весь объект, чтобы получить все координаты.

Код решения может быть действительно оптимизирован. Для того, чтобы быть более читаемым, я написал его небольшими шагами.

Надеюсь, я помогу кому-либо с этим решением.