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

Question

我正在使用标记点和连接它们的线在地图上显示跟踪。

问题是我想在链接上显示行进方向；

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

有什么方法可以完成这个任务。

Answer 1

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

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

请参阅文档的这一部分 - SYMBOLS ON POLYLINE，除了箭头之外还可以使用。

看看这个使用箭头指示折线上方向的小提琴。

DEMO with a sigle symbol

您还可以为符号设置repeat 属性，使其定期重复。

DEMO with repeating symbols

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);

这个预定义符号的有趣特征（特别是向前箭头）是箭头指向您的坐标所在的确切方向。所以，这显然是为了在跟踪系统中指示方向。

更新：不确定您要在 cmets 中说明的点。标记可以以相同的方式显示。下面是用循环添加标记并用箭头设置折线的代码：

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
    }