Javascript 如何在google map v3中创建多段线，并使其能够绘制

此代码在v2中：

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

在v3中该怎么做

---

谢谢

很遗憾，v3不支持启用绘图/启用编辑。有一个

您可以自己实现它（例如，请参见），但是在v2中实现它并不是件小事

---

我目前正在寻找解决这个问题的方法。到目前为止，我发现只有一个实现看起来至少有点有希望：。

实现起来很痛苦，但这是可能的。我使用状态模式来跟踪数字化过程。我使用了ExtJS，所以我试图包含严格使用javascript的内容。单击按钮，数字化对象将跟踪，无论我是否正在数字化或编辑。该州还将跟踪我需要处理的几何体类型：点、多段线、多边形。按钮可用于设置状态。我将通过以下方式捕捉地图点击：

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

这将同时适用于多段线和多边形。我只跟踪了简单的拓扑结构，没有为此跟踪甜甜圈或多个几何体

点的编辑和删除更加困难

首先，我必须跟踪用户选择的几何体是多段线还是多边形，并将该几何体放置在digitizer内的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);   
}

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

---

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

因为Maps API v3.7最终支持此功能

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()