Question

我一直在努力解决这个问题。需要一些建议。我看过一些类似的主题，但找不到适合我的答案。

我正在使用谷歌地图API创建一个应用程序，它将确定您的位置，确定一个特定点（点b），然后将箭头移动到指向点b的方向。我在计算轴承时遇到问题，有人可以提供一些帮助吗？

我有： - 点a的纬度/经度 - 点b的纬度/经度 - 设备知道North的位置，并且我能够计算设备指向北方的距离

我需要：计算将获取此信息并吐出若干度以指向箭头。

我看过这里似乎很有用，但我仍然无法让它运作 - 它正在返回NaN

http://www.movable-type.co.uk/scripts/latlong.html

我不是真正的js专业人士，所以我非常感谢这里的一些指导。

非常感谢！

Answer 1

您可以使用Geometry Library。

您需要将其添加到API调用中：

https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry

然后使用computeHeading方法：

var heading = google.maps.geometry.spherical.computeHeading(pointA, pointB);

其中pointA和pointB是两个LatLng对象。

https://developers.google.com/maps/documentation/javascript/reference?csw=1#spherical

Answer 2

下面是一个动态的例子。

<!DOCTYPE html>
<html>
<head>
<style>
    html,
    body,
    #map-canvas {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry&ext=.js"></script>
<div id="info"></div>
<div id="map-canvas"></div>
<script type="text/javascript">
    var map;
    var infowindow = new google.maps.InfoWindow();
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(32.0748, 34.774);
        var mapOptions = {
            zoom: 15,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        point1 = new google.maps.Marker({
            map: map,
            draggable: true,
            position: google.maps.geometry.spherical.computeOffset(map.getCenter(), 0, 80)
        });
        google.maps.event.addListener(point1, 'dragend', bisectAngle);

        point2 = new google.maps.Marker({
            map: map,
            draggable: true,
            position: google.maps.geometry.spherical.computeOffset(map.getCenter(), 800, -58.6)
        });
        google.maps.event.addListener(point2, 'dragend', bisectAngle);

        var poly3 = new google.maps.Polyline({
            path: [point1.getPosition(), point2.getPosition()],
            map: map
        });
        poly3.binder = new MVCArrayBinder(poly3.getPath());
        point1.bindTo('position', poly3.binder, '0'); //this makes the line bind to point 1
        point2.bindTo('position', poly3.binder, '1'); //and point 2

        var bounds = new google.maps.LatLngBounds();
        bounds.extend(point1); 
        bounds.extend(point2);
        map.fitBounds(bounds); //zooms in
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addDomListener(window, 'load', bisectAngle);

    function bisectAngle() {
        var head1 = google.maps.geometry.spherical.computeHeading(point1.getPosition(), point2.getPosition());
        document.getElementById('info').innerHTML = "Bearing is " + head1.toFixed(1) + " or " + (head1 + 90).toFixed(1) + " if E-W is 0. Better try daniel street...";
    }

    /*
     * Use bindTo to allow dynamic drag of markers to refresh poly.
     */
    function MVCArrayBinder(mvcArray) { //credit to https://stackoverflow.com/a/26663570/2381899
        this.array_ = mvcArray;
    }
    MVCArrayBinder.prototype = new google.maps.MVCObject();
    MVCArrayBinder.prototype.get = function (key) {
        if (!isNaN(parseInt(key))) {
            return this.array_.getAt(parseInt(key));
        } else {
            this.array_.get(key);
        }
    }
    MVCArrayBinder.prototype.set = function (key, val) {
        if (!isNaN(parseInt(key))) {
            this.array_.setAt(parseInt(key), val);
        } else {
            this.array_.set(key, val);
        }
    }
</script>
</body>
</html>

Maps API v3：计算方位

2 个答案: