如何从gmaps RECTANGLE(Overlay)获取4个顶点坐标?

时间:2013-03-20 22:46:10

标签: javascript google-maps

如何从gmaps RECTANGLE(叠加)获得4个顶点坐标?

我只能从selectedShape.getBounds()

获得NE和SW lat

我需要一个4顶点矩形来对MySQL php函数进行后期处理检查。

1 个答案:

答案 0 :(得分:49)

NorthWest = NorthEast Lat,SouthWest Lng

SouthEast = SouthWest Lat,NorthEast Lng

var bounds = rectangle.getBounds();
var NE = bounds.getNorthEast();
var SW = bounds.getSouthWest();
// North West
var NW = new google.maps.LatLng(NE.lat(),SW.lng());
// South East
var SE = new google.maps.LatLng(SW.lat(),NE.lng());

example fiddle

代码段

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    var rectangle = new google.maps.Rectangle({
      bounds: map.getBounds()
    })
    var bounds = rectangle.getBounds();
    var NE = bounds.getNorthEast();
    var NEmark = new google.maps.Marker({
      map: map,
      position: NE,
      title: "NE"
    });
    var SW = bounds.getSouthWest();
    var SWmark = new google.maps.Marker({
      map: map,
      position: SW,
      title: "SW"
    });
    // North West
    var NW = new google.maps.LatLng(NE.lat(), SW.lng());
    var NWmark = new google.maps.Marker({
      map: map,
      position: NW,
      title: "NW"
    });
    // South East
    var SE = new google.maps.LatLng(SW.lat(), NE.lng());
    var SEmark = new google.maps.Marker({
      map: map,
      position: SE,
      title: "SE"
    });

    var polygon = new google.maps.Polygon({
      map: map,
      paths: [
        [NE, NW, SW, SE]
      ]
    });
    map.setZoom(map.getZoom() - 1);
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>