使用谷歌地圖V3保存多邊形的經緯度

Question

我正在使用下面的代碼（從here中偷走它）來顯示地圖並繪製每個提供者覆蓋的區域。我如何返回並存儲繪製的每個形狀的緯度/經度陣列？我需要將其保存到數據庫中，以便稍後可以在搜索特定區域內的提供者時用於搜索查詢。

<script type="text/javascript"> 
    var drawingManager; 
    var selectedShape; 
    var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; 
    var selectedColor; 
    var colorButtons = {}; 

    function clearSelection() { 
    if (selectedShape) { 
     selectedShape.setEditable(false); 
     selectedShape = null; 
    } 
    } 

    function setSelection(shape) { 
    clearSelection(); 
    selectedShape = shape; 
    shape.setEditable(true); 
    selectColor(shape.get('fillColor') || shape.get('strokeColor')); 
    } 

    function deleteSelectedShape() { 
    if (selectedShape) { 
     selectedShape.setMap(null); 
    } 
    } 

    function selectColor(color) { 
    selectedColor = color; 
    for (var i = 0; i < colors.length; ++i) { 
     var currColor = colors[i]; 
     colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; 
    } 

    // Retrieves the current options from the drawing manager and replaces the 
    // stroke or fill color as appropriate. 
    var polylineOptions = drawingManager.get('polylineOptions'); 
    polylineOptions.strokeColor = color; 
    drawingManager.set('polylineOptions', polylineOptions); 

    var rectangleOptions = drawingManager.get('rectangleOptions'); 
    rectangleOptions.fillColor = color; 
    drawingManager.set('rectangleOptions', rectangleOptions); 

    var circleOptions = drawingManager.get('circleOptions'); 
    circleOptions.fillColor = color; 
    drawingManager.set('circleOptions', circleOptions); 

    var polygonOptions = drawingManager.get('polygonOptions'); 
    polygonOptions.fillColor = color; 
    drawingManager.set('polygonOptions', polygonOptions); 
    } 

    function setSelectedShapeColor(color) { 
    if (selectedShape) { 
     if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) { 
     selectedShape.set('strokeColor', color); 
     } else { 
     selectedShape.set('fillColor', color); 
     } 
    } 
    } 

    function makeColorButton(color) { 
    var button = document.createElement('span'); 
    button.className = 'color-button'; 
    button.style.backgroundColor = color; 
    google.maps.event.addDomListener(button, 'click', function() { 
     selectColor(color); 
     setSelectedShapeColor(color); 
    }); 

    return button; 
    } 

    function buildColorPalette() { 
    var colorPalette = document.getElementById('color-palette'); 
    for (var i = 0; i < colors.length; ++i) { 
     var currColor = colors[i]; 
     var colorButton = makeColorButton(currColor); 
     colorPalette.appendChild(colorButton); 
     colorButtons[currColor] = colorButton; 
    } 
    selectColor(colors[0]); 
    } 

    function initialize() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(22.344, 114.048), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDefaultUI: true, 
     zoomControl: true 
    }); 

    var polyOptions = { 
     strokeWeight: 0, 
     fillOpacity: 0.45, 
     editable: true 
    }; 
    // Creates a drawing manager attached to the map that allows the user to draw 
    // markers, lines, and shapes. 
    drawingManager = new google.maps.drawing.DrawingManager({ 
     drawingMode: google.maps.drawing.OverlayType.POLYGON, 
     markerOptions: { 
     draggable: true 
     }, 
     polylineOptions: { 
     editable: true 
     }, 
     rectangleOptions: polyOptions, 
     circleOptions: polyOptions, 
     polygonOptions: polyOptions, 
     map: map 
    }); 

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
     if (e.type != google.maps.drawing.OverlayType.MARKER) { 
     // Switch back to non-drawing mode after drawing a shape. 
     drawingManager.setDrawingMode(null); 

     // Add an event listener that selects the newly-drawn shape when the user 
     // mouses down on it. 
     var newShape = e.overlay; 
     newShape.type = e.type; 
     google.maps.event.addListener(newShape, 'click', function() { 
      setSelection(newShape); 
     }); 
     setSelection(newShape); 
     } 
    }); 

    // Clear the current selection when the drawing mode is changed, or when the 
    // map is clicked. 
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); 
    google.maps.event.addListener(map, 'click', clearSelection); 
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); 

    buildColorPalette(); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

任何幫助，將不勝感激。

謝謝

Answer 1

這是你需要的東西。 我測試過它，它工作得很好。 只需複製，然後享受它。

<html> 

<!--Here you will create a polygon by tools that Google maps "drawingManager" gives to you and then you have an array named "coordinates" as an output. This array saves all latLng of the polygon. When you edit the polygon it also edit this variable too. 
!--> 

<head> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=drawing"></script> 

<!--Global variables!--> 
<script> 
//This variable gets all coordinates of polygone and save them. Finally you should use this array because it contains all latitude and longitude coordinates of polygon. 
var coordinates = []; 

//This variable saves polygon. 
var polygons = []; 
</script> 

<script> 
//This function save latitude and longitude to the polygons[] variable after we call it. 
function save_coordinates_to_array(polygon) 
{ 
    //Save polygon to 'polygons[]' array to get its coordinate. 
    polygons.push(polygon); 

    //This variable gets all bounds of polygon. 
    var polygonBounds = polygon.getPath(); 

    for(var i = 0 ; i < polygonBounds.length ; i++) 
    { 
     coordinates.push(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng()); 
     alert(i); 
    } 
} 
</script> 

<script> 
function initialize() 
{ 
    //Create a Google maps. 
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 12, center: new google.maps.LatLng(32.344, 51.048)}); 

    //Create a drawing manager panel that lets you select polygon, polyline, circle, rectangle or etc and then draw it. 
    var drawingManager = new google.maps.drawing.DrawingManager(); 
    drawingManager.setMap(map); 

    //This event fires when creation of polygon is completed by user. 
    google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) { 
     //This line make it possible to edit polygon you have drawed. 
     polygon.setEditable(true); 

     //Call function to pass polygon as parameter to save its coordinated to an array. 
     save_coordinates_to_array(polygon); 

     //This event is inside 'polygoncomplete' and fires when you edit the polygon by moving one of its anchors. 
     google.maps.event.addListener(polygon.getPath(), 'set_at', function() { 
      alert('changed'); 
      save_coordinates_to_array(polygon); 
      }); 

     //This event is inside 'polygoncomplete' too and fires when you edit the polygon by moving on one of its anchors. 
     google.maps.event.addListener(polygon.getPath(), 'insert_at', function() { 
      alert('also changed'); 
      save_coordinates_to_array(polygon); 
      }); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
<div style="width:1024px; height:768px;" id="map"></div> 
</body> 

</html>