如何在谷歌地图v3中创建折线，并使其启用Drawing

Question

这段代码是在 v2 中：

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

在 v3 中怎么做？

谢谢

Answer 1

从 Maps API v3.7 开始，终于支持这个功能了！

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

Answer 2

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

可以自己实现它（请参阅 这个演示），但在 v2 中做到这一点并不简单。

我目前正在自己​​寻找解决这个问题的方法。到目前为止，我只发现一种看起来至少有点前途的实现： 折线启用编辑-启用绘图-for-GMaps-API-v3。

Answer 3

实施起来很痛苦，但这是可能的。我使用状态模式来跟踪数字化过程。我使用了 EXT JS，所以我尝试包含严格的 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);

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

点的编辑和删除更加困难。

首先，我必须跟踪用户选择的几何图形是折线还是多边形，并将该几何图形放置在数字化仪内的 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 行代码，但它使您可以灵活地做任何您想做的事情，包括设置标记样式。