google maps API v3 - cách vẽ đa giác động/polylines?

Question

Tôi có 4 ngày kinh nghiệm với API Javascript của Google Maps và tôi thấy tài liệu và chia sẻ thông tin của họ khó hiểu nhất.

Có ai có kinh nghiệm hoặc kiến ​​thức về cách vẽ đa giác/polylines trên bản đồ google (sử dụng Javascript API V3) tương tự như this ví dụ? (mà tôi tìm thấy trên this blogBài đăng từ 2008)

Cho đến nay nghiên cứu của tôi có thể cho tôi biết ví dụ sử dụng Javascript API V2 trực tiếp hoặc sử dụng thư viện tiện ích GeometryControl từ V2 (có thể tìm thấy here để tham khảo). Tôi dường như không thể tìm thấy nếu Javascript API V3 có bất kỳ cách nào để cho phép giao diện như vậy.

Tôi sẽ tiếp tục nghiên cứu nhưng sẽ đánh giá cao bất kỳ nhận xét hoặc liên kết hoặc đề xuất hữu ích nào. Ngay cả khi bạn chỉ cho tôi đúng hướng để nghiên cứu thêm. :)

Answer 1

Sau nhiều nghiên cứu tôi đã xem qua ví dụ this. Mà, sau khi phát hiện ra nó và googling nó, có vẻ như câu trả lời chung cho các câu hỏi như tôi. Điều này rất cơ bản nhưng đúng theo API V3.

Sử dụng mã trong ví dụ này tôi đang xây dựng thành công mẫu thử nghiệm mà tôi cần. Mã là cơ bản nhưng tôi đã tìm thấy rằng nó có thể được mở rộng để phù hợp hơn với thông số kỹ thuật của tôi, đó là tốt.

Liên kết được cung cấp trong nhận xét của tôi cho câu trả lời của plexer sẽ là giải pháp tốt nhất nhưng người phát triển nó nói rằng nó vẫn đang được phát triển và do đó không đủ ổn định để sử dụng trong các ứng dụng phát hành.

Answer 2

Hãy xem ví dụ này, từ trang Maps ví dụ API v3:

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

Mã nghe nhấp chuột trên bản đồ, và trên mỗi nhấp chuột bổ sung thêm lat cặp/lng vào mảng của một polyline. Điều này dẫn đến một polyline mà tham gia mỗi điểm nhấp.

Mở rộng hình này sang đa giác nên tương đối đơn giản. Tại một số điểm bạn sẽ cần phải đóng đa giác. Bạn có thể thực hiện việc này bằng cách nghe nhấp chuột vào đa giác hoặc điểm đánh dấu (biểu thị giao lộ) hoặc bằng cách nhấn nút mà người dùng có thể nhấp và đặt đa giác để tự động đóng.

Answer 3

này có vẻ là việc thực hiện gần nhất với biên tập đa giác tôi đã tìm thấy: http://snipplr.com/view/38270/google-maps-api-v3--enableediting-polylines/

Answer 4

Đối với Google Maps v3.7, bạn có thể sử dụng Drawing Library

Một thư viện tốt: polygonEdit/polylineEdit bởi ryshkin @ gmail. com

Answer 5

Hãy nhìn vào kịch bản của tôi cho các đường cong: http://curved_lines.overfx.net/

Sau đây là các chức năng mà tôi sử dụng:

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

Dưới đây là nội dung html của bạn + khởi tạo kịch bản:

<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

tôi thấy cái này khá dễ dàng .. Bạn có thể vẽ đa giác, có thể tìm thấy chiều dài của họ và nó khá dễ dàng ..http://geojason.info/demos/line-length-polygon-area-google-maps-v3/

đây là một chút mã trong trường hợp liên kết bị hỏng.

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