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

Question

我在地图上显示跟踪标记点和连接它们的线.

问题是我想要显示链接上的旅行方向;

所以我没有得到如何在标记点之间的线上显示方向.

有没有办法完成这项任务.

Answer 1

可以使用箭头显示折线上的方向.

谷歌地图api3提供了一些预定义的路径.

请参阅文档的这一部分 - SYMBOLS ON POLYLINE,可以使用除箭头之外的其他部分.

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

演示与sigle符号

您还可以设置repeat符号的属性,使其以固定间隔重复.

演示与重复符号

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

此预定义符号(特别是向前箭头)的有趣特征是箭头指向您的坐标所在的确切方向.因此,这显然有助于在跟踪系统中表示方向.

更新:不确定您在评论中试图说明的一点.标记可以以相同的方式显示.以下是使用循环添加标记并使用箭头设置折线的代码:

与标记和多线的演示

使用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
    }