Вычесть метры от широты

Question

Каков самый простой способ рассчитать новую точку широты, пройдя SOUTH x количество метров от заданной широты? Например, Эйфелева башня находится в 48.8582 latitude and 2.2940 longitude. У меня есть круг вокруг Башни с радиусом 171 метр. Я хочу разместить InfoBox только под кругом.

Так вот мой круг:

var circle = new google.maps.Circle({ 
    map: map, 
    fillColor: 'red', 
    fillOpacity: 0.2, 
    strokeWeight: 1, 
    center: new google.maps.LatLng(48.8582, 2.2940), 
    radius: 171 
}); 

Моего инфобокс в настоящее время получает позиционируются мертвый по кругу, но я хочу его прямо под кругом вместо этого. Поэтому я предполагаю, что мне просто нужно переместить ящик (171/2 = 85,5) на юг, чтобы получить позиционирование, которое я хочу.

Простой расчет для этого? Я посмотрел на haversine formula, но это кажется намного более сложным, чем то, что мне нужно, и я не понимаю, как его использовать, и подходит ли ему эта проблема.

Я хочу ехать на юг ровно 85,5 метра и получить новые лат/длинные координаты для позиционирования InfoBox. Предположительно, изменилась бы только широта, но я не уверен.

Answer 1

85,5 метра на юг очень просто, потому что широта градуса всегда имеет одинаковое значение в метрах. Земля имеет окружность ± 40075 км, что соответствует 360 градусам, поэтому ваш ответ равен 360 * 85,5/40075000 = 0,000768 градусов.

Answer 2

Вы можете рассчитать 171 метров на юг, используя spherical geometry computOffset method

google.maps.geometry.spherical.computeOffset(circle.getCenter(),circle.getRadius(),180) 

proof of concept fiddle

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

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    geocoder = new google.maps.Geocoder(); 
 
    var secheltLoc = new google.maps.LatLng(-27.532861, 134.693340), 
 
    markers, 
 
    myMapOptions = { 
 
     zoom: 7, 
 
     center: secheltLoc, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map-canvas"), myMapOptions); 
 

 
    var circle = new google.maps.Circle({ 
 
    map: map, 
 
    fillColor: 'red', 
 
    fillOpacity: 0.2, 
 
    strokeWeight: 1, 
 
    center: new google.maps.LatLng(48.8582, 2.2940), 
 
    radius: 171 
 
    }); 
 
    map.fitBounds(circle.getBounds()); 
 
    var boxText = document.createElement("div"); 
 
    boxText.innerHTML = "Eiffel Tower<br>48.8582 latitude<br> 2.2940 longitude"; 
 
    // Start InfoBox 
 
    //these are the options for all infoboxes 
 
    infoboxOptions = { 
 
    content: boxText, 
 
    disableAutoPan: false, 
 
    zIndex: null, 
 
    maxWidth: 0, 
 
    boxStyle: { 
 
     background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", 
 
     opacity: 0.85 
 
    }, 
 
    closeBoxMargin: "6px 2px 0px 0px", 
 
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
 
    infoBoxClearance: new google.maps.Size(1, 1), 
 
    isHidden: false, 
 
    pane: "floatPane", 
 
    enableEventPropagation: false, 
 
    pixelOffset: new google.maps.Size(-50, 0) 
 
    }; 
 

 
    //define the text and style for all infoboxes 
 
    boxText.style.cssText = "width: 100px; border: 1px solid #333; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px; color: #333"; 
 

 
    //Define the infobox 
 
    var infobox = new InfoBox(infoboxOptions); 
 
    infobox.setPosition(google.maps.geometry.spherical.computeOffset(circle.getCenter(), circle.getRadius(), 180)); 
 
    infobox.open(map); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas { 
 
    height: 400px; 
 
    width: 400px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&ext=.js"></script> 
 
<script src="http://www.staff.org.au/infobox.js"></script> 
 
<div id="map-canvas"></div>