如何为谷歌地图的跟踪路径添加方向 [英] How to add direction on tracking path for google maps

问题描述

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

我在地图上显示跟踪标记点和连接它们的线。 / p>

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

有没有完成这项任务的方法。

解决方案

显示多段线上的方向可以用箭头完成。

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

请参阅本节的文档 -
SYMBOLS ON POLYLINE ，可以比箭头可以使用其他

查看此小提琴，它使用箭头指示多段线上的方向。

带有符号符号的演示

您还可以为符号设置 repeat 属性，以便重复一次。

带重复符号的演示

JavaScript -

  var iconsetngs = {
路径：google.maps.SymbolPath .FORWARD_CLOSED_ARROW 
}; 
 var polylineoptns = {
路径：标记，
 strokeOpacity：0.8，
 strokeWeight：3，
 map：地图，
图标：[{
 icon：iconsetngs，
抵消：'100％'}] 
}; 
 polyline = new google.maps.Polyline（polylineoptns）; 
  

这个预定义符号（特别是）的有趣功能是箭头指向你的坐标所在的确切方向。所以，这显然有助于表示跟踪系统中的方向。

更新：不确定您想告诉的观点在评论中。标记可以以相同的方式显示。以下是将循环添加标记并使用箭头设置折线的代码：

DEMO WITH MARKERS AND POLYLINE

Javascript：

 var polylineoptns = {
 strokeOpacity：0.8，
 strokeWeight：3，
 map：map，
图标：[{
 repeat ：'70px'，//改变这个值以改变箭头之间的距离
 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 ++）//循环显示标记
 {
 var pos = markers [i]; 
 var marker = new google.maps.Marker（{
 position：pos，
 map：map 
}）; 
 path [z] .push（marker.getPosition（））; //将新创建的标记位置添加到路径数组
} 
  

I am showing the tracking on map with marker points and line connecting them.

The problem is that i want to show the direction of travel on the links;

so I am not getting how to show the direction on the line between the marker points.

Is there any way to accomplish this task.

解决方案

Showing the direction on the polyline can be accomplished with arrows.

There are some predefined paths that the google maps api3 provides.

See this section of the documentation - SYMBOLS ON POLYLINE, that can be used other than an arrow.

Have a look at this fiddle that uses an arrow to indicate the direction on the polyline.

DEMO with a sigle symbol

You can also set the repeat property for the symbol so that it repeats for regular intervals.

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

The interesting feature of this predefined symbol(the forward arrow specially) is that the arrow points towards the exact direction of which your co-ordinates are located. So, that obviously serves the purpose of denoting the direction in a Tracking System.

UPDATE: Not sure about the point you are trying to tell in the comments. The markers can be displayed the same way. Here is the code that adds markers with a loop and also set the polyline with arrows:

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
    }

这篇关于如何为谷歌地图的跟踪路径添加方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！