如何添加方向跟踪路径的谷歌地图

Question

我在地图上用标记点和线连接它们。

问题是我想显示链接的移动方向;

所以我不知道如何在标记点之间的直线上显示方向

有办法完成这项任务吗

Answer 1

在折线上显示方向可以用箭头来完成。

google maps api3提供了一些预定义的路径。

请参阅文档的这一部分- POLYLINE上的符号，可以使用箭头以外的符号。

看看这个小提琴，它用一个箭头来指示折线上的方向。

DEMO带有单个符号

您还可以为符号设置repeat属性，以便它以固定的间隔重复。

DEMO使用重复符号

JavaScript——

var iconsetngs = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polylineoptns = {
    path: markers,
    strokeOpacity: 0.8,
    strokeWeight: 3,
    map: map,
    icons: [{
        icon: iconsetngs,
        offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);

这个预定义符号(向前箭头，特别是)的有趣特性是，箭头指向坐标所在的确切方向。因此，这显然是在跟踪系统中表示方向的目的。

UPDATE:不确定你在评论中想要表达的观点。标记可以以相同的方式显示。下面是用循环添加标记并用箭头设置折线的代码:

DEMO WITH MARKERS AND POLYLINE

Javascript:

var polylineoptns = {
        strokeOpacity: 0.8,
        strokeWeight: 3,
        map: map,
        icons: [{
            repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
            icon: iconsetngs,
            offset: '100%'}]
    };
    polyline = new google.maps.Polyline(polylineoptns);
    var z = 0;
    var path = [];
    path[z] = polyline.getPath();
    for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS
    {
        var pos = markers[i];
        var marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY
    }