google-api - 使用 Google map V3 保存多边形的纬度/经度

Question

对于服务提供商网站，我使用下面的代码(从 here 窃取)来显示 map 并绘制每个提供商覆盖的区域。如何返回并存储我绘制的每个形状的纬度/经度数组？我需要将其保存到数据库中，以便稍后在搜索特定区域内的提供商时可以将其用于搜索查询。

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