矩形的高度和宽度 api google 映射 v3

Question

有人可以帮助我吗？我正在尝试获取 google 映射 api 矩形的宽度和高度。我是这样做的：

                google.maps.event.addListener(drawingManager, 'rectanglecomplete', function (rectangle) {
                    //height
                    var height= google.maps.geometry.spherical.computeDistanceBetween(
                        new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
                        new google.maps.LatLng(rectangle.bounds.toJSON().south, rectangle.bounds.toJSON().west)
                    ); 
                    //width
                    var width= google.maps.geometry.spherical.computeDistanceBetween(
                        new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
                        new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().west)
                    );
               });

Answer 1

您计算的高度距离有误（东北角到西南角）。这个：

//height
var height= google.maps.geometry.spherical.computeDistanceBetween(
              new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
              new google.maps.LatLng(rectangle.bounds.toJSON().south, rectangle.bounds.toJSON().west)
            );

应该是：

//height
var height= google.maps.geometry.spherical.computeDistanceBetween(
              new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
              new google.maps.LatLng(rectangle.bounds.toJSON().south, rectangle.bounds.toJSON().east)
            );

（或者您可以将两个经度设为 .west）

请注意，如果在地图投影中显示为矩形，则北边和南边的宽度会有所不同。

proof of concept fiddle

代码片段：

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var rectBounds = new google.maps.LatLngBounds();
  var NW = map.getCenter();
  var markerNW = new google.maps.Marker({
    map: map,
    position: NW,
    label: "C",
    title: NW.toUrlValue(6)
  })
  rectBounds.extend(map.getCenter());
  var NE = google.maps.geometry.spherical.computeOffset(map.getCenter(), 100, 90);
  var markerNE = new google.maps.Marker({
    map: map,
    position: NE,
    label: "NE",
    title: NE.toUrlValue(6)
  });
  rectBounds.extend(markerNE.getPosition());
  var SW = google.maps.geometry.spherical.computeOffset(map.getCenter(), 100, 180);
  var markerSW = new google.maps.Marker({
    map: map,
    position: SW,
    label: "SW",
    title: SW.toUrlValue(6)
  })
  rectBounds.extend(markerSW.getPosition());
  var SE = google.maps.geometry.spherical.computeOffset(NE, 100, 180);
  var markerSE = new google.maps.Marker({
    map: map,
    position: SE,
    label: "SE",
    title: SE.toUrlValue(6)
  })
  rectBounds.extend(markerSE.getPosition());
  var rect = new google.maps.Rectangle({
    map: map,
    bounds: rectBounds
  })
  map.fitBounds(rectBounds);
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['rectangle']
    },
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) {
    //height
    var height = google.maps.geometry.spherical.computeDistanceBetween(
      new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
      new google.maps.LatLng(rectangle.bounds.toJSON().south, rectangle.bounds.toJSON().east)
    );
    //width
    var width = google.maps.geometry.spherical.computeDistanceBetween(
      new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().east),
      new google.maps.LatLng(rectangle.bounds.toJSON().north, rectangle.bounds.toJSON().west)
    );
    document.getElementById('dimensions').innerHTML = "height:" + height.toFixed(2) + " m<br>width:" + width.toFixed(2) + " m";
  });
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="dimensions"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing,geometry&callback=initMap" async defer></script>

Answer 2

我是这样解决的：

            // get the coordinates for the NE and SW corners
            NE = rectangle.bounds.getNorthEast ();
            SW = rectangle.bounds.getSouthWest ();
            // from that, figure out the latitudes and the longitudes
            lat1 = NE.lat ();
            lat2 = SW.lat ();
            lng1 = NE.lng ();
            lng2 = SW.lng ();
            // construct new LatLngs using the coordinates for the horizontal distance between lng1 and lng2
            horizontalLatLng1 = new google.maps.LatLng (lat1, lng1);
            horizontalLatLng2 = new google.maps.LatLng (lat1, lng2);
            // construct new LatLngs using the coordinates for the vertical distance between lat1 and lat2
            verticalLatLng1 = new google.maps.LatLng (lat1, lng1);
            verticalLatLng2 = new google.maps.LatLng (lat2, lng1);
            // work out the distance horizontally
            width = google.maps.geometry.spherical.computeDistanceBetween (horizontalLatLng1, horizontalLatLng2);
            // work out the distance vertically
            height = google.maps.geometry.spherical.computeDistanceBetween (verticalLatLng1, verticalLatLng2);

https://duncan99.wordpress.com/2013/10/19/google-maps-size/

矩形的高度和宽度 api google 映射 v3

Height and width of rectangle api google maps v3

javascript

size

google-maps

rectangles

google-maps-api-3