Как получить расстояние между прямоугольником центром и средними точками

Question

У меня Прямоугольная, использовали

map.getBounds(); 

Теперь я хотел бы, чтобы вычислить расстояние (в метрах) между прямоугольником центра и короткой средней точки.

Уже есть код:

var mapCenter = this.map.getCenter() 
var mapBounds = this.map.getBounds(); 
var southEast = mapBounds.getSouthWest(); 
var middlePoint = ??; 
var radius = google.maps.geometry.spherical.computeDistanceBetween(mapCenter, middlePoint); 

Но я не знаю, как получить более короткое расстояние (от центра) средней точки.

Answer 1

Широта «сверху» в пределах северная широта границ: mapBounds.getNorthEast().lat(). Долгота центра границ долгота центра границ mapBounds.getCenter().lng()

(если вы не знаете, какая сторона «короче» один, вычислить как и использовать более короткое значение)

var mapCenter = map.getCenter() 
var mapBounds = map.getBounds(); 
var southEast = mapBounds.getSouthWest(); 
var middlePoint = new google.maps.LatLng(mapBounds.getNorthEast().lat(), mapBounds.getCenter().lng()); 
var radius = google.maps.geometry.spherical.computeDistanceBetween(mapCenter, middlePoint); 

proof of concept fiddle

фрагмент кода:

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 mapCenter = map.getCenter() 
 
    var mapBounds = map.getBounds(); 
 
    var rectangle = new google.maps.Rectangle({ 
 
     map: map, 
 
     bounds: mapBounds 
 
    }); 
 
    var southEast = mapBounds.getSouthWest(); 
 
    var middlePoint = new google.maps.LatLng(mapBounds.getNorthEast().lat(), mapBounds.getCenter().lng()); 
 
    var radius = google.maps.geometry.spherical.computeDistanceBetween(mapCenter, middlePoint); 
 
    var circle = new google.maps.Circle({ 
 
     center: mapCenter, 
 
     radius: radius, 
 
     map: map 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
     position: middlePoint, 
 
     map: map 
 
    }); 
 
    var line = new google.maps.Polyline({ 
 
     map: map, 
 
     path: [mapCenter, middlePoint] 
 
    }); 
 
    document.getElementById('info').innerHTML = radius.toFixed(2); 
 
    map.setZoom(12); 
 
    }); 
 
} 
 
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?libraries=geometry"></script> 
 
<div id="info"></div> 
 
<div id="map_canvas"></div>