javascript - 让箭头标记指向另一个标记的方向

Question

我正在开发一个 Google map 应用程序，用户可以在其中搜索位置。此位置必须指向预定义标记的方向。

给定以下代码片段:

预定义标记:

      var station = new google.maps.LatLng(52.375401, 5.218824);

      var stationMarker = new google.maps.Marker({
        position:   station,
        map:        map,
        });

将放置在用户搜索位置的标记:

      var direction = new google.maps.LatLng(52.376423, 4.887234);

      var directionMarker = new google.maps.Marker({
        position:   direction,
        map:        map,
        draggable:  false,
        title:      "test"
        });

      directionMarker.setIcon(({
        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
        scale: 6
        }));

如何确保方向标记(即来自用户搜索结果的标记)始终指向预定义的标记？

我正在使用 Google Maps API v3。

我创建了一个 jsFiddle，你可以找到它 here

Answer 1

好的，你开始吧:

1. 使用 google.maps.SymbolPath.FORWARD_CLOSED_ARROW 使其指向北方。
2. 添加几何库以计算航向。
3. 在方向图标上使用旋转参数。

这里是如何compute the heading从您的方向标记到车站:

var heading = google.maps.geometry.spherical.computeHeading(direction,station);

然后用它相应地旋转你的图标:

directionMarker.setIcon({
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 6,
    rotation: heading
});

我已经删除了上面代码中一对不必要的 ()。

JSFiddle demo