谷歌地圖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(); 
    } 
}