0

此代码在 v2 中：

var polyline = new GPolyline([point1,point2], "#ff0000", 5);
map.addOverlay(polyline);
polyline.enableDrawing();

以及如何在 v3 中执行？

谢谢

4

3 回答 3

1

由于 Maps API v3.7 终于支持这个功能了！！

http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

于 2011-11-15T08:01:11.053 回答
0

实施起来很痛苦，但这是可能的。我使用状态模式来跟踪数字化过程。我使用了 EXT JS，所以我试图包含严格的 javascript 内容。单击按钮后，数字化对象将跟踪，无论我是 DIGITIZING 还是 NOT_DIGITIZING 还是 EDITING。该状态还将跟踪我需要处理的几何类型：POINT、POLYLINE、POLYGON。按钮可用于设置状态。我会通过以下方式捕获地图点击：

google.maps.event.addListener(map,"click",digitizer.onDigitize.createDelegate(digitizer));
google.maps.event.addListener(map,"dblclick",digitizer.endDigitize.createDelegate(digitizer));

在数字化仪对象中，我跟踪了数字化多边形和点。每当用户单击时，我都会将事件中的 latLng 发送到被跟踪对象。

this.digitizedGeometry.getPath().push(e.latLng);

这对折线和多边形都有效。我只跟踪了简单的拓扑结构，而不是甜甜圈或多个几何形状。

点的编辑和删除比较困难。

首先，我必须跟踪用户是否选择了 POLYLINE 或 POLYGON 几何并将此几何放置在数字化仪内的 editGeometry 变量中，并启用按钮进行编辑。

我循环浏览了编辑几何的路径，并添加了具有不同样式的标记和中点标记，以确保标记是可拖动的。

var path = this.editGeometry.getPath();
for (var i = 0; i < path.getLength(); i++) {
    // Add point geometry markers
    var point = path.getAt(i);
    var latLng = new google.maps.LatLng(point.lat(), point.lng());
    var markerOptions = {position: latLng, map: mapPanel.getMap()};
    Ext.apply(markerOptions, digitizer.markerStyle);
    var marker = new google.maps.Marker(markerOptions);

    // Used to track the latLng associated with the marker when position changes.
    marker.edit = {
        path: path,
        position: i,
        isMidpoint: false
    };
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true));
    google.maps.event.addListener(marker, "rightclick", digitizer.onContextMenu.createDelegate(mapPanel, marker, true));
    digitizer.editHandles.push(marker);

    // determine the midpoint
    var nextValue = (i+1) % path.getLength();
    var otherPoint = path.getAt(nextValue);

    var latLng = new google.maps.LatLng((point.lat() + otherPoint.lat()) / 2.0, (point.lng() + otherPoint.lng()) / 2.0);
    var markerOptions = {position: latLng, map: mapPanel.getMap()};
    Ext.apply(markerOptions, digitizer.midpointMarkerStyle);
    var marker = new google.maps.Marker(markerOptions);

    marker.edit = {
        path: path,
        position: i,
        isMidpoint: true
    };
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true));
    digitizer.editHandles.push(marker);   
}

关键部分是“dragend”，并应用编辑。如果它是路径中的实际点，我会移动该点并重新确定中点。

marker.edit.path.setAt(marker.edit.position, e.latLng);

// Adjust midpoints
var index = handles.indexOf(marker);
var prev = (index - 2 + handles.length) % handles.length;
var mpprev = (index - 1 + handles.length) % handles.length;
var next = (index + 2) % handles.length;
var mpnext = (index + 1) % handles.length;
var prevMarker = handles[prev];
var nextMarker = handles[next];
var prevMpMarker = handles[mpprev];
var nextMpMarker = handles[mpnext];
prevMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + prevMarker.getPosition().lat()) / 2.0, (e.latLng.lng() + prevMarker.getPosition().lng()) / 2.0));
nextMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + nextMarker.getPosition().lat()) / 2.0, (e.latLng.lng() + nextMarker.getPosition()

你可以看到这是非常复杂的。如果你不想要中点，那么上面代码的第一行就足够了。应用中点更复杂。您必须将中点附加到路径，并移动所有位置，并添加新的中点并调整先前的中点。如果我想删除一个点，我必须删除那个点，减少手柄的位置，删除一个中点并重新调整前一个中点。

希望这将使您对如何执行此操作有所了解。太糟糕了，不是 2 行代码，而是 200 行代码，但它让您可以灵活地做任何您想做的事情，包括设置标记样式。

于 2010-07-26T03:07:13.160 回答
0

不幸的是，v3 不支持 enableDrawing/enableEditing。在 bugtracker 中有一个功能请求。

可以自己实现它（例如，参见这个演示），但在 v2 中实现它并不是微不足道的。

我目前正在自己​​寻找解决此问题的方法。到目前为止，我只发现了一个看起来至少有一点希望的实现：Polyline-enableEditing-enableDrawing-for-GMaps-API-v3。

于 2010-06-21T08:31:45.327 回答