31

我制作了一个使用绘图管理器(并实现可选形状)的映射应用程序。该程序的工作原理如下:在单击按钮后完成多边形的绘制时,将在多边形上映射一条路径。

在此过程之后编辑多边形时,我希望再次调用映射函数。但是我无法让这部分工作:

我尝试使用以下代码,但我总是收到错误,因为添加此侦听器时尚未选择任何形状。我能做些什么?

google.maps.event.addListener(selectedShape, 'set_at', function() {
    console.log("test");
});

google.maps.event.addListener(selectedShape, 'insert_at', function() {
    console.log("test");
});

重要的代码片段:

function showDrawingManager(){
    var managerOptions = {
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.POLYGON]
        },
        markerOptions: {
            editable: true,
            icon: '/largeTDGreenIcons/blank.png'
        },
        polygonOptions: {
            fillColor: "#1E90FF",
            strokeColor: "#1E90FF",
        },
        polylineOptions: {
            strokeColor: "#FF273A"
        }
    }

    var drawingManager = new google.maps.drawing.DrawingManager(managerOptions);
    drawingManager.setMap(map);
    return drawingManager;
}

function clearSelection() {
    if (selectedShape) {
        console.log("clearSelection");

        selectedShape.setEditable(false);
        selectedShape = null;
        numberOfShapes--;
    }
}

function setSelection(shape) {

   console.log("setSelection");

   clearSelection();
   selectedShape = shape;
   shape.setEditable(true);
   numberOfShapes++;
   //getInformation(shape);
}

function initialize(){

    //....

    var drawingManager = showDrawingManager();
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        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);
        }
    });
4

5 回答 5

32

我通过调用 .getPath() 并将侦听器放入侦听器中解决了这个问题,每次单击形状时都会调用该侦听器。我认为 Google API 文档对如何使用 set_at 不是很清楚,因此它对其他人也可能有用。

// 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() {
    google.maps.event.addListener(newShape.getPath(), 'set_at', function() {
        console.log("test");
    });

    google.maps.event.addListener(newShape.getPath(), 'insert_at', function() {
        console.log("test");
    });
    setSelection(newShape);
});
于 2012-09-20T16:37:05.477 回答
21
    google.maps.event.addListener(yourPolygon.getPath(), 'insert_at', function(index, obj) {
           //polygon object: yourPolygon
    });
    google.maps.event.addListener(yourPolygon.getPath(), 'set_at', function(index, obj) {
           //polygon object: yourPolygon
    });

上面的代码对我有用。set_at当我们从突出显示的点(边缘)修改多边形区域时触发 where 并且当insert_at我们拖动突出显示边缘之间的点时触发。

我在polygoncomplete事件中和从数据库加载多边形后使用了它们。这对他们来说很好。

于 2013-12-19T12:46:38.990 回答
10

为了避免 set_at 和拖动提到的问题,我添加了以下内容,它在拖动绘图时禁用 set_at 的事件广播。我创建了一个扩展多边形类的类,并添加了这个方法:

 ExtDrawingPolygon.prototype.enableCoordinatesChangedEvent = function(){
  var me = this,
      superClass = me.superClass,
      isBeingDragged = false,
      triggerCoordinatesChanged = function(){
         //broadcast normalized event
         google.maps.event.trigger(superClass, 'coordinates_changed');
      };

  // If the overlay is being dragged, set_at gets called repeatedly,
  // so either we can debounce that or ignore while dragging,
  // ignoring is more efficient.
  google.maps.event.addListener(superClass, 'dragstart', function(){
    isBeingDragged = true;
  });

  // If the overlay is dragged
  google.maps.event.addListener(superClass, 'dragend', function(){
    triggerCoordinatesChanged();
    isBeingDragged = false;
  });

  // Or vertices are added to any of the possible paths, or deleted
  var paths = superClass.getPaths();
  paths.forEach(function(path, i){
    google.maps.event.addListener(path, "insert_at", function(){
      triggerCoordinatesChanged();
    });
    google.maps.event.addListener(path, "set_at", function(){
      if(!isBeingDragged){
        triggerCoordinatesChanged();
      }
    });
    google.maps.event.addListener(path, "remove_at", function(){
      triggerCoordinatesChanged();
    });
  });
};

它向多边形本身添加了一个“coordinates_changed”事件,因此其他代码可以只监听一个好的、单一的、简化的事件。

于 2015-11-17T22:07:38.663 回答
3

chrismarx 的回答开始,下面是在 TypeScript 中使用新事件的示例。我对删除超类和更改对“我”的引用做了一些小改动,因为未定义的引用存在问题。

在您的文件或全局配置文件等的顶部,使用:

declare global {
    module google.maps {
        interface Polygon {
            enableCoordinatesChangedEvent();
        }
    }
}

然后定义扩展:

google.maps.Polygon.prototype.enableCoordinatesChangedEvent = function () {

    var me = this,
        isBeingDragged = false,
        triggerCoordinatesChanged = function () {
            // Broadcast normalized event
            google.maps.event.trigger(me, 'coordinates_changed');
        };

    // If  the overlay is being dragged, set_at gets called repeatedly,
    // so either we can debounce that or igore while dragging,
    // ignoring is more efficient
    google.maps.event.addListener(me, 'dragstart', function () {
        isBeingDragged = true;
    });

    // If the overlay is dragged
    google.maps.event.addListener(me, 'dragend', function () {
        triggerCoordinatesChanged();
        isBeingDragged = false;
    });

    // Or vertices are added to any of the possible paths, or deleted
    var paths = me.getPaths();
    paths.forEach(function (path, i) {
        google.maps.event.addListener(path, "insert_at", function () {
            triggerCoordinatesChanged();
        });
        google.maps.event.addListener(path, "set_at", function () {
            if (!isBeingDragged) {
                triggerCoordinatesChanged();
            }
        });
        google.maps.event.addListener(path, "remove_at", function () {
            triggerCoordinatesChanged();
        });
    });
};

最后调用扩展并添加监听器:

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
        event.overlay.enableCoordinatesChangedEvent();

        google.maps.event.addListener(event.overlay, 'coordinates_changed', function (index, obj) {
            // Polygon object: yourPolygon
            console.log('coordinates_changed');
        });
    });
于 2016-11-03T09:49:04.513 回答
0

从 Thomas 的回答开始,这里有一个实现,可以对使用 创建的叠加层DrawingManager以及Feature从 GeoJSON 添加的叠加层进行编辑。

对我来说主要的困难google.maps是使用DrawingManager由. 最终,我忽略了内置对象,转而将所有内容存储为重新创建的叠加层,设置编辑事件侦听器,然后在绘制它们时单独调用它们。最初绘制的叠加层和加载的特征将被丢弃。google.maps.Data FeatureaddFromGeoJson()DatasetMap()

该过程如下所示:

  1. 初始化地图。
  2. 添加addfeature事件侦听器以检测何时添加功能。这将在addGeoJson()for each期间被触发Feature,获取其对应的覆盖类型和几何形状并将它们传递给实用程序函数addFeature()以创建覆盖。
  3. 加载任何 GeoJSON。这将为加载的每个对象触发上面的事件侦听器。
  4. 初始化DrawingManager.
  5. {overlay}complete为每种覆盖类型(polygonpolylinemarker)添加事件侦听器。触发时,这些事件首先确定叠加层是否有效(例如多边形具有 >= 3 个顶点),然后调用addFeature(),传入叠加层类型和几何图形。

调用时,addFeature()重新创建覆盖并设置所有适用的事件侦听器。最后,叠加层存储在数组中并显示在地图上。

// GeoJSON containing previously stored data (optional) 
var imported = {
  type: "FeatureCollection",
  features: [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -73.985603, 40.748429
      ],
    },
    properties: {
      activity: "Entry",
    }
  }, ]
};

// this will fill with map data as you import it from geojson or draw
var features = {
  polygons: [],
  lines: [],
  markers: []
};

// set default drawing styles
var styles = {
  polygon: {
    fillColor: '#00ff80',
    fillOpacity: 0.3,
    strokeColor: '#008840',
    strokeWeight: 1,
    clickable: true,
    editable: true,
    zIndex: 1
  },
  polyline: {
    strokeColor: '#ffff00',
    strokeWeight: 3,
    clickable: true,
    editable: true,
    zIndex: 2
  },
  marker: {
    clickable: true,
    draggable: true,
    zIndex: 3
  }
}

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.748429,
      lng: -73.985603
    },
    zoom: 18,
    noClear: true,
    mapTypeId: 'satellite',
    navigationControl: true,
    mapTypeControl: false,
    streetViewControl: false,
    tilt: 0
  });

  // add this listener BEFORE loading from GeoJSON
  map.data.addListener('addfeature', featureAdded);

  // load map features from geojson
  map.data.addGeoJson(imported);

  // initialize drawing tools
  var drawingManager = new google.maps.drawing.DrawingManager({
    // uncomment below line to set default drawing mode
    // drawingMode: 'marker',  
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon', 'polyline', 'marker']
    },
    polygonOptions: styles.polygon,
    polylineOptions: styles.polyline,
    markerOptions: styles.marker
  });
  drawingManager.setMap(map);

  // for each drawing mode, set a listener for end of drawing
  drawingManager.addListener('polygoncomplete', function(polygon) {
    // delete drawing if doesn't have enough points
    if (polygon.getPath().getLength() < 3) {
      alert('Polygons must have 3 or more points.');
      polygon.getPath().clear();
    }
    // otherwise create new feature and delete drawing
    else {
      addFeature('Polygon', polygon.getPath());
      polygon.setMap(null);
    }
  });
  drawingManager.addListener('polylinecomplete', function(line) {
    // delete drawing if doesn't have enough points
    if (line.getPath().getLength() < 2) {
      alert('Lines must have 2 or more points.');
      line.getPath().clear();
    }
    // otherwise create new feature and delete drawing
    else {
      addFeature('Polyline', line.getPath());
      line.setMap(null);
    }
  });
  drawingManager.addListener('markercomplete', function(marker) {
    // point geometries have only one point by definition, 
    // so create new feature and delete drawing
    addFeature('Point', marker.getPosition());
    marker.setMap(null);
    updateGeoJSON();
  });
}

// this function gets called when GeoJSON gets loaded
function featureAdded(e) {
  switch (e.feature.getGeometry().getType()) {
    case 'Polygon':
      addFeature('Polygon', e.feature.getGeometry().getAt(0).getArray());
      break;
    case 'LineString':
      addFeature('Polyline', e.feature.getGeometry().getArray());
      break;
    case 'Point':
      addFeature('Point', e.feature.getGeometry().get());
  }
  map.data.remove(e.feature);
}

function addFeature(type, path) {
  switch (type) {
    case 'Polygon':
      var polygon = new google.maps.Polygon(styles.polygon);
      polygon.setPath(path);

      // listeners for detecting geometry changes
      polygon.getPath().addListener('insert_at', someFunction)
      polygon.getPath().addListener('set_at', someFunction);
      polygon.getPath().addListener('remove_at', someFunction);
      polygon.getPath().addListener('dragend', someFunction);

      // delete vertex using right click
      polygon.addListener('rightclick', function(e) {
        if (e.vertex == undefined) return;
        if (polygon.getPath().getLength() == 3) {
          polygon.setMap(null);
          features.polygons = features.polygons.filter(isValid);
        } else {
          polygon.getPath().removeAt(e.vertex);
          outputAsGeoJSON();
        }
      });

      // add it to our list of features
      features.polygons.push(polygon);

      // and display it on the map
      polygon.setMap(map);
      break;

    case 'Polyline':
      var line = new google.maps.Polyline(styles.polyline);
      line.setPath(path);

      line.getPath().addListener('insert_at', someOtherFunction);
      line.getPath().addListener('set_at', someOtherFunction);
      line.getPath().addListener('remove_at', someOtherFunction);
      line.getPath().addListener('dragend', someOtherFunction);

      // allow right-click vertex deletion
      line.addListener('rightclick', function(e) {
        if (e.vertex == undefined) return;
        if (line.getPath().getLength() == 2) {
          line.setMap(null);
          features.lines = features.lines.filter(isValid);
        } else {
          line.getPath().removeAt(e.vertex);
          outputAsGeoJSON();
        }
      });

      // add it to our list of features
      features.lines.push(line);

      // and display it on the map
      line.setMap(map);
      break;

    case 'Point':
      var marker = new google.maps.Marker(styles.marker);
      marker.setPosition(path);

      // make a splashy entrance
      marker.setAnimation(google.maps.Animation.DROP);

      // detect modifications
      marker.addListener('drag', function(e) {
        // unnecessary bouncing just to throw you off
        marker.setAnimation(google.maps.Animation.BOUNCE);
      });
      marker.addListener('dragend', function(e) {
        // make the bouncing stop
        marker.setAnimation(null);
      })

      // allow right-click deletion
      marker.addListener('rightclick', function(e) {
        marker.setMap(null);
        features.markers = features.markers.filter(isValid);
        outputAsGeoJSON();
      });

      // add it to our list of features
      features.markers.push(marker);

      // and display it on the map
      marker.setMap(map);
      break;
  }

  outputAsGeoJSON();
}

function someFunction() {
  // do stuff
}

function someOtherFunction() {
  // do other stuff
}

// utility function for reuse any time someone right clicks
function isValid(f) {
  return f.getMap() != null;
}

function outputAsGeoJSON() {
  // we're only using the Data type here because it can export as GeoJSON
  var data = new google.maps.Data;

  // add all the polygons in our list of features
  features.polygons.forEach(function(polygon, i) {
    data.add({
      geometry: new google.maps.Data.Polygon([polygon.getPath().getArray()]),
      properties: {
        description: 'I am a polygon'
      }
    });
  });

  // and add all the lines 
  features.lines.forEach(function(line, i) {
    data.add({
      geometry: new google.maps.Data.LineString(line.getPath().getArray()),
      properties: {
        description: 'I am a line'
      }
    });
  });

  // and finally any markers
  features.markers.forEach(function(marker, i) {
    data.add({
      geometry: new google.maps.Data.Point(marker.getPosition()),
      properties: {
        description: 'I am a marker'
      }
    });
  });

  // GeoJSONify it
  data.toGeoJson(function(json) {
    document.getElementById('geojson').value = JSON.stringify(json);
  });
}

https://jsfiddle.net/pqdu05s9/1/

于 2019-04-03T03:11:53.337 回答