在google maps api v3中修改多边形后的事件 [英] event after modifying polygon in google maps api v3

问题描述

我制作了一个使用绘图管理器（并实现可选形状）的映射应用程序;该程序的工作原理如下：点击按钮后，在多边形上绘制多边形时绘制多边形。

在此过程之后编辑多边形时，我想要映射函数再次被调用。但是我不能得到这个部分工作;

我尝试使用以下代码，但是我总是收到一个错误，因为当添加此侦听器时，没有选择形状。我可以做什么？

  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：{ 
可编辑：true，
图标：'/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--; 
} 
} 
 
函数setSelection（shape）{
 console.log（setSelection）; 
 
 clearSelection（）; 
 selectedShape = shape; 
 shape.setEditable（true）; 
 numberOfShapes ++; 
 // getInformation（shape）; 
} 
 
函数initialize（）{
 // .... 
 var drawingManager = showDrawingManager（）; 
 google.maps.event.addListener（drawingManager，'overlaycomplete'，function（e）{
 if（e.type！= google.maps.drawing.OverlayType.MARKER）{
 /绘制形状后切换回非绘图模式
 drawingManager.setDrawingMode（null）; 
 
 //添加一个事件侦听器，当用户$ b时选择新绘制的形状$ b //鼠标悬停在
 var newShape = e.overlay; 
 newShape.type = e.type; 
 google.maps.event.addListener（newShape，'click' function（）{
 setSelection（newShape）; 
}）; 
 setSelection（newShape）; 
} 
}）; 
  

解决方案

我通过调用.getPath（）在每次单击形状时调用的侦听器中的侦听器。我认为google api文档不是很清楚如何使用set_at，所以它也可能对其他人有用。

  /添加一个事件侦听器，当用户
 //鼠标停在它上面时，可以选择新绘制的形状。 
 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）; 
}）; 
  

I made a mapping application that uses the drawing manager (and implements selectable shapes); The program works as follows: when finishing drawing the polygon after clicking a button a path, is mapped on the polygon.

When the polygon is edited after this process I want the mapping function to be called again. However i can't get this part working;

I tried using following code but i always get an error because no shape is selected yet when this listener is added. What can I do?

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

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

important pieces of code:

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

解决方案

I solved it by calling .getPath() and putting the listener inside the the listener which is called every time a shape is clicked. I think the google api documentation is not very clear on how to use the set_at so it maybe useful for other people too.

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

这篇关于在google maps api v3中修改多边形后的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！