怎么看坐标从绘制多边形

Question

我有一个例子，如何写多边形上的谷歌地图：

http://jsbin.com/quzed/1/edit

所以这里是代码：

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

我怎么能看到什么从drawen多边形坐标，以及如何保存它（等mysql）如何知道坐标如何写多边形？

sombody能帮助我吗？我在这段代码中输了吗？用户行为（用户绘制多边形）的坐标在哪里？

等。如果我有3个坐标（44.5,55.6）（45.7,56.87）（46.7,46.8），我可以在这里画出来吗？

如果我借鉴了一些例子多边形，我怎么可以看到多边形的坐标？

Answer 1

看看the example on google's site。

鉴于你已经有一个多边形，你可以得到它的路径与方法的getPath坐标。

console.log(bermudaTriangle.getPath()); 

还有一个setPath方法可以接受坐标数组（或者MVCArray）。

多边形也可以有内部环（如在一个甜甜圈），但在尝试之前，你应该习惯了简单的凸多边形。

关于一个问题，“如何保存绘制多边形”，谷歌地图API提供static functions to encode polygon and polyline paths，所以你能坚持的对象为文本。

还有其他一些库，如Wicket，它们可以采用Google地图对象并使用标准WKT格式对其进行编码，这是几何启用的数据库原生理解的。