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

Question

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

google-mapsmarker

10

我正在地图上展示跟踪信息，包括标记点和连接它们的线。

问题是我想在连接线上展示行进方向，但不知道如何做到。

有没有办法完成这个任务？

- Mohammad Sadiq Shaikh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shiridish · Accepted Answer

通过箭头可以在折线上显示方向。

Google Maps API3提供了一些预定义路径。

请参阅文档的这个部分- 符号在折线上，除了箭头外还可以使用其他符号。

查看此fiddle，它使用箭头指示折线上的方向。

带有单个符号的演示

您还可以为符号设置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
    }