Question

搜索了一整天后，我找不到答案。

所以问题是：
我有一个谷歌地图，用户可以在上面绘制。在此之后，用户可以将其保存在服务器上。它工作正常。这是绘图代码：

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
  }
}

你可以看到，直到现在，它完美地运作： enter image description here

但是用户可以更改多边形并希望在服务器上保存新更改的多边形。听众：

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 ');
  });

通过这种方式，您可以截取多边形上的点击以管理您的需求

Answer 2

你的想法是一个好意，但不是解决方案的结束。但是谢谢你的暗示。由于你的回答，我找到了办法。

一般我们应该认为，对象bermudaTriangle应该具有属性＆＃34; paths＆＃34;。但它并没有像这样工作。

为了获取加载的Poly（从服务器加载）的坐标，有一个google-map函数，如＆＃34; getPath（）＆＃34;或＆＃34;的getPaths（）＆＃34 ;.似乎两种方法都有效。

请注意，我已经更改了bermudaTriangle＆＃39; to＆＃39; globalLoadedPoly＆＃39;。

所以解决方案现在又与上面的代码结合使用了：

创建全局变量：
```
var globalLoadedPoly;
```
（全局没有必要，但我这样做是为了进一步行动）

获取侦听器的函数路径：

var thisPolyPath = globalLoadedPoly.getPath();

在加载的多边形变化时，聆听事件：

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

4.在函数thisPolyHasChanged（）中，通过使用函数setSelection（shape）将加载的poly设置为实际选择。并通过调用函数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; 
}

最后，如果你迭代对象＆＃34; coordObj＆＃34;在firebug中创建一个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-maps对象的坐标或其他属性，请使用专有的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();

不要忘记遍历整个对象，以获得所有坐标。

解决方案代码可以真正优化。为了更具可读性，我只是小步写了一遍。

我希望，我能帮助任何人解决这个问题。

加载多边形后的Fire事件

2 个答案: