如何从gmaps RECTANGLE（Overlay）获取4个顶点坐标？

4个顶点坐标

关注

发信

关注(28)粉丝(399)

如何从gmaps RECTANGLE（Overlay）获取4个顶点坐标？

本文介绍了如何从gmaps RECTANGLE（Overlay）获取4个顶点坐标？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何从gmaps RECTANGLE（Overlay）获得4个顶点坐标？

我只能从

How do you get 4 vertex coordinates from gmaps RECTANGLE (Overlay)?

I can get only NE and SW lat long from selectedShape.getBounds()

I need a 4 vertex rectangle to post-process check in MySQL php functions.

解决方案

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

code snippet:

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>

这篇关于如何从gmaps RECTANGLE（Overlay）获取4个顶点坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-23 12:44