2013-02-13 95 views
1

我正在使用Google地圖API集成。我需要從該地圖中的特定選定區域獲取經度和緯度。在我的腳本基於谷歌地圖選定的區域。如何計算谷歌地圖中選定區域的經度和緯度?

 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> 
<p> <div id="map" style="width:980px;height:480px;"></div></p> 

在該腳本,我已經創建谷歌選定區域map.but我需要得到該特定選擇area`s經度和latitude.how得到所選區域(城市和農村)價值?

enter image description here

+3

地理座標描述單點的位置。沒有「一個地區的經緯度」這樣的東西。您需要定義您認爲哪個點是您所在地區的位置。 – lanzz 2013-02-13 11:15:23

+2

目前還不清楚你想要達到的目標。你想得到一個特定的點(中心?)還是你想要計算多邊形的面積? – Andy 2013-02-13 11:30:51

+2

獲取所有選定點的經緯度,並對它們做一些我想......不知道你想做什麼。 – AmazingDreams 2013-02-13 11:31:34

回答

1

你不能讓所有使用谷歌地圖API的任意多邊形內部的城市和國家。您可以使用Google Maps API v3(或web service)使用reverse geocoder獲得單點城市和國家,但任意多邊形的請求數量可能是無限的,並且會導致配額和比率限制。如果您在支持地理查詢的數據庫中擁有自己的地理數據源(例如geonames),則可以將多邊形的頂點發送到您的服務器並檢索該多邊形中的位置。

相關問題