2013-02-13 98 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),则可以将多边形的顶点发送到您的服务器并检索该多边形中的位置。

相关问题