Sauvegarder Latitude/Longitude des polygones Avec Google Maps V3

Question

pour un site Web de fournisseurs de services J'utilise le code ci-dessous (je l'ai volé de here) pour afficher une carte et dessiner des zones couvertes par chaque fournisseur. Comment puis-je retourner et stocker les tableaux de latitudes/longitudes de chaque forme que je dessine? J'ai besoin de l'enregistrer dans la base de données plus tard, je peux utiliser pour les requêtes de recherche lors de la recherche de fournisseurs dans une certaine zone.

<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> 

toute aide serait appréciée.

Merci

Answer 1

C'est quelque chose dont vous avez besoin. Je l'ai testé et ça marche très bien. Il suffit de copier, puis en profiter.

<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>