谷歌地图API v3 - 如何绘制动态多边形/折线？

Question

我有4天的Google Maps JavaScript API经验，我发现他们的文档和信息共享令人困惑。

有没有人有经验或知识如何在谷歌地图上绘制多边形/折线（使用Javascript API V3）类似this的例子？ （我在this blogPost从2008年发现）

就我的研究可以告诉我，该示例​​直接使用JavaScript API V2或使用V2的GeometryControl实用程序库（可以找到here以供参考）。我似乎无法找到如果JavaScript API V3有任何方式允许这样的接口。

我将继续我的研究，但希望任何有用的评论或链接或建议。即使你指出我进一步研究的正确方向。 :)

Answer 1

经过大量的研究，我发现了this的例子。在发现它并使用Google搜索后，它似乎是我的问题的一般答案。这是非常基本的，但根据V3 API是正确的。

使用此示例中的代码，我成功地构建了一个我需要的原型。代码是基本的，但我发现它可以扩展更好地适合我的规格，这是很好的。

在我对plexer的回答的评论中提供的链接将是最好的解决方案，但开发人员指出它仍在开发中，因此不够稳定，无法用于发布应用程序。

Answer 2

看看这个例子，从地图API V3示例页面：

http://code.google.com/apis/maps/documentation/javascript/examples/polyline-complex.html

代码监听点击地图上，并在每个点击添加一个额外的纬度/经度对进入多段线的阵列。这会导致连接每个点击点的多段线。

将其扩展为多边形应该相对简单。在某些时候，您需要关闭多边形。您可以通过点击多边形或标记（指示交叉点）或通过点击用户可以点击的按钮并将多边形设置为自动关闭来执行此操作。

Answer 3

这看起来是最接近实现多边形编辑器，我发现：http://snipplr.com/view/38270/google-maps-api-v3--enableediting-polylines/

Answer 4

对于谷歌地图3.7版，您可以使用Drawing Library

另一个很好的图书馆：polygonEdit/polylineEdit通过ryshkin @ gmail的。 COM

Answer 5

看看我的曲线脚本： http://curved_lines.overfx.net/

这里是我使用的功能：

function curved_line_generate(LatStart, LngStart, LatEnd, LngEnd, Color, Horizontal, Multiplier) { 

    var LastLat = LatStart; 
    var LastLng = LngStart; 

    var PartLat; 
    var PartLng; 

    var Points = new Array(0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9); 
    var PointsOffset = new Array(0.2, 0.35, 0.5, 0.55, 0.60, 0.55, 0.5, 0.35, 0.2); 

    var OffsetMultiplier = 0; 

    if (Horizontal == 1) { 
    var OffsetLenght = (LngEnd - LngStart) * 0.1; 
    } else { 
    var OffsetLenght = (LatEnd - LatStart) * 0.1; 
    } 

    for (var i = 0; i < Points.length; i++) { 
    if (i == 4) { 
     OffsetMultiplier = 1.5 * Multiplier; 
    } 

    if (i >= 5) { 
     OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier; 
    } else { 
     OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier; 
    } 

    if (Horizontal == 1) { 
     PartLat = (LatStart + ((LatEnd - LatStart) * Points[i])) + OffsetMultiplier; 
     PartLng = (LngStart + ((LngEnd - LngStart) * Points[i])); 
    } else { 
     PartLat = (LatStart + ((LatEnd - LatStart) * Points[i])); 
     PartLng = (LngStart + ((LngEnd - LngStart) * Points[i])) + OffsetMultiplier; 
    } 

    curved_line_create_segment(LastLat, LastLng, PartLat, PartLng, Color); 

    LastLat = PartLat; 
    LastLng = PartLng; 
    } 

    curved_line_create_segment(LastLat, LastLng, LatEnd, LngEnd, Color); 

} 

function curved_line_create_segment(LatStart, LngStart, LatEnd, LngEnd, Color) { 
    var LineCordinates = new Array(); 

    LineCordinates[0] = new google.maps.LatLng(LatStart, LngStart); 
    LineCordinates[1] = new google.maps.LatLng(LatEnd, LngEnd); 

    var Line = new google.maps.Polyline({ 
    path: LineCordinates, 
    geodesic: false, 
    strokeColor: Color, 
    strokeOpacity: 1, 
    strokeWeight: 3 
    }); 

    Line.setMap(map); 
} 

这是你的HTML内容+初始化脚本：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 

    var map; 
    google.maps.event.addDomListener(window, 'load', initialize); 

    function initialize() { 

    /* Create Google Map */ 

    var myOptions = { 
     zoom: 6, 
     center: new google.maps.LatLng(41, 19.6), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

    /* Add Sample Lines */ 

    /* Sofia - Burgas */ 
    curved_line_generate(42.68243562027229, 23.280029421875042, 42.488302202180364, 27.432861453125042,"#F00", true, 1); 

    /* Sofia - Varna */ 
    curved_line_generate(42.68243562027229, 23.280029421875042, 43.19716750254011, 27.894287234375042,"#1a8809", true, 1); 

    /* Ancona - Sofia */ 
    curved_line_generate(43.61221698671215, 13.458252078125042,42.68243562027229, 23.280029421875042, "#00F", true, 1); 

    /* Sofia - Florence */ 
    curved_line_generate(42.68243562027229, 23.280029421875042, 43.73935229722859, 11.217041140625042,"#666", true, 1); 

    /* Sofia - Athens */ 
    curved_line_generate(42.68243562027229, 23.280029421875042, 37.97884527841534, 23.719482546875042,"#ffa200", false, 2); 
    } 

</script> 

Answer 6

我发现这是很容易的。您可以绘制多边形，可以找到它们的长度和它很容易..http://geojason.info/demos/line-length-polygon-area-google-maps-v3/

这里有点代码的情况下链接关闭。

var map; 

// Create a meausure object to store our markers, MVCArrays, lines and polygons 
var measure = { 
    mvcLine: new google.maps.MVCArray(), 
    mvcPolygon: new google.maps.MVCArray(), 
    mvcMarkers: new google.maps.MVCArray(), 
    line: null, 
    polygon: null 
}; 

// When the document is ready, create the map and handle clicks on it 
jQuery(document).ready(function() { 

    map = new google.maps.Map(document.getElementById("map"), { 
    zoom: 15, 
    center: new google.maps.LatLng(39.57592, -105.01476), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    draggableCursor: "crosshair" // Make the map cursor a crosshair so the user thinks they should click something 
    }); 

    google.maps.event.addListener(map, "click", function(evt) { 
    // When the map is clicked, pass the LatLng obect to the measureAdd function 
    measureAdd(evt.latLng); 
    }); 

}); 

function measureAdd(latLng) { 

    // Add a draggable marker to the map where the user clicked 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: latLng, 
     draggable: true, 
     raiseOnDrag: false, 
     title: "Drag me to change shape", 
     icon: new google.maps.MarkerImage(
     "/images/demos/markers/measure-vertex.png", 
     new google.maps.Size(9, 9), 
     new google.maps.Point(0, 0), 
     new google.maps.Point(5, 5) 
    ) 
    }); 

    // Add this LatLng to our line and polygon MVCArrays 
    // Objects added to these MVCArrays automatically update the line and polygon shapes on the map 
    measure.mvcLine.push(latLng); 
    measure.mvcPolygon.push(latLng); 

    // Push this marker to an MVCArray 
    // This way later we can loop through the array and remove them when measuring is done 
    measure.mvcMarkers.push(marker); 

    // Get the index position of the LatLng we just pushed into the MVCArray 
    // We'll need this later to update the MVCArray if the user moves the measure vertexes 
    var latLngIndex = measure.mvcLine.getLength() - 1; 

    // When the user mouses over the measure vertex markers, change shape and color to make it obvious they can be moved 
    google.maps.event.addListener(marker, "mouseover", function() { 
    marker.setIcon(
     new google.maps.MarkerImage("/images/demos/markers/measure-vertex-hover.png", 
     new google.maps.Size(15, 15), 
     new google.maps.Point(0, 0), 
     new google.maps.Point(8, 8) 
    ) 
    ); 
    }); 

    // Change back to the default marker when the user mouses out 
    google.maps.event.addListener(marker, "mouseout", function() { 
    marker.setIcon(
     new google.maps.MarkerImage(
     "/images/demos/markers/measure-vertex.png", 
     new google.maps.Size(9, 9), 
     new google.maps.Point(0, 0), 
     new google.maps.Point(5, 5) 
    ) 
    ); 
    }); 

    // When the measure vertex markers are dragged, update the geometry of the line and polygon by resetting the 
    //  LatLng at this position 
    google.maps.event.addListener(marker, "drag", function(evt) { 
    measure.mvcLine.setAt(latLngIndex, evt.latLng); 
    measure.mvcPolygon.setAt(latLngIndex, evt.latLng); 
    }); 

    // When dragging has ended and there is more than one vertex, measure length, area. 
    google.maps.event.addListener(marker, "dragend", function() { 
    if (measure.mvcLine.getLength() > 1) { 
     measureCalc(); 
    } 
    }); 

    // If there is more than one vertex on the line 
    if (measure.mvcLine.getLength() > 1) { 

    // If the line hasn't been created yet 
    if (!measure.line) { 

     // Create the line (google.maps.Polyline) 
     measure.line = new google.maps.Polyline({ 
     map: map, 
     clickable: false, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1, 
     strokeWeight: 3, 
     path:measure. mvcLine 
     }); 

    } 

    // If there is more than two vertexes for a polygon 
    if (measure.mvcPolygon.getLength() > 2) { 

     // If the polygon hasn't been created yet 
     if (!measure.polygon) { 

     // Create the polygon (google.maps.Polygon) 
     measure.polygon = new google.maps.Polygon({ 
      clickable: false, 
      map: map, 
      fillOpacity: 0.25, 
      strokeOpacity: 0, 
      paths: measure.mvcPolygon 
     }); 

     } 

    } 

    } 

    // If there's more than one vertex, measure length, area. 
    if (measure.mvcLine.getLength() > 1) { 
     measureCalc(); 
    } 
}