如何在Google地图V3上的每个折线段上绘制箭头 [英] How to draw an arrow on every polyline segment on Google Maps V3

问题描述

我正在寻找一个解决方案来解决这个问题，但由于我找不到准确的解决方案，我最终自己解决它并将其发布到这里，希望它有帮助。

Google地图为您提供了折线功能，该功能基于坐标列表可以绘制一系列连接所有这些线的线。

您可以绘制折线使用以下代码的单箭头：

  var allCoordinates = [
 new google.maps.LatLng（26.291， 
 new google.maps.LatLng（26.291，150.027），
 new google.maps.LatLng（22.291,153.027），
 new google.maps.LatLng（18.291，153.027） 
]; 
 $ b var polyline = new google.maps.Polyline（{
 path：allCoordinates，
 strokeColor：color，
 strokeOpacity：1.0，
 strokeWeight：2 ，
 geodesic：true，
图标：[{
图标：{path：google.maps.SymbolPath.FORWARD_CLOSED_ARROW}，
抵消：'100％'
} ] 
}）; 
  

这里的问题是，箭头将只显示在最后一段，如下图所示，但有时候路线可能不那么直接，我们需要在每个细分区域添加一个箭头。

图标定义中的重复属性可能是另一种选择，但只允许以像素为单位定义度量，并且definelty不会与多段线上的每个方向变化相匹配。 b

因此，我发现实现这一目标的一种方法是制作多段多段线，每段允许一段在这种情况下，箭头将在每一个上绘制。这是代码：

  var allCoordinates = [
 google.maps.LatLng（26.291,148.027），
 new google.maps.LatLng（26.291,150.027），
 new google.maps.LatLng（22.291,153.027），
 google.maps.LatLng（18.291,153.027）
 ]。 （var i = 0，n = allCoordinates.length; i< n; i ++）{
 
 var coordinate = new Array（）;对于（var j = i; j  coordinates [j-i] = allCoordinates [j]; 
 
 $ b var polyline = new google.maps.Polyline（{
 path：coordinates，
 strokeColor：color，
 strokeOpacity：1.0，
 strokeWeight：2，
 geodesic：true，
图标：[{
图标：{path：google.maps.SymbolPath.FORWARD_CLOSED_ARROW}，
抵消：'100％' 
}] 
}）; 
 polyline.setMap（map）; 
 polylines.push（折线）; 
 
 
  

这就是图片：

我希望这适用于任何正在寻找类似此类的人！

解决方案

图标选项对象有一个重复属性。来自Google Maps JS API的虚线示例显示了在线上重复符号而不是创建新折线的方法。在你的例子中，它看起来像这样：

  var allCoordinates = [
 new google.maps .LatLng（26.291,148.027），
新google.maps.LatLng（26.291,150.027），
新google.maps.LatLng（22.291,153.027），
新google.maps.LatLng （18.291,153.027）
]; 
 $ b var polyline = new google.maps.Polyline（{
 path：allCoordinates，
 strokeColor：color，
 strokeOpacity：1.0，
 strokeWeight：2 ，
 geodesic：true，
图标：[{
图标：{path：google.maps.SymbolPath.FORWARD_CLOSED_ARROW}，
抵消：'100％'，
重复：'20px'
}] 
}）; 
 polyline.setMap（map）; 
 polylines.push（折线）; 
  

I was looking for a solution to this problem on stackoverflow but since I couldn't find the accurate solution I ended up solving it myself and post it here, hope it help.

Google Maps provides you the Polyline feature, which based on a list of coordinates can draw a series of lines joining all of them.

You can draw a polyline with a single arrow with the following code:

     var allCoordinates = [
        new google.maps.LatLng(26.291, 148.027),
        new google.maps.LatLng(26.291, 150.027),
        new google.maps.LatLng(22.291, 153.027),
        new google.maps.LatLng(18.291, 153.027)
    ];

     var polyline = new google.maps.Polyline({
            path: allCoordinates,
            strokeColor: color,
            strokeOpacity: 1.0,
            strokeWeight: 2,
            geodesic: true,
            icons: [{
                icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
                offset: '100%'
            }]
        });

The problem here is that the arrow will be only drawn in the last segment as shown in the next picture, but sometimes the route could be not so straightforward and we need to add an arrow on every segment.

The attribute 'repeat' inside the icon definition could be another option but allows only to define a measure in pixels and that definelty won't match with every change of direction on the polyline.

So, one way I found to achive this was to make several polylines, one per segment allowing in that case the arrow to be drawn on each one. This is the code:

     var allCoordinates = [
        new google.maps.LatLng(26.291, 148.027),
        new google.maps.LatLng(26.291, 150.027),
        new google.maps.LatLng(22.291, 153.027),
        new google.maps.LatLng(18.291, 153.027)
    ];

    for (var i = 0, n = allCoordinates.length; i < n; i++) {

        var coordinates = new Array();
        for (var j = i; j < i+2 && j < n; j++) {
            coordinates[j-i] = allCoordinates[j];
        }

        var polyline = new google.maps.Polyline({
            path: coordinates,
            strokeColor: color,
            strokeOpacity: 1.0,
            strokeWeight: 2,
            geodesic: true,
            icons: [{
                icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
                offset: '100%'
            }]
        });
        polyline.setMap(map);
        polylines.push(polyline);

    }

And this is the Picture:

I hope this works for anyone who is looking for something like this!

解决方案

There is a repeat property for the icon options object. The example of dashed lines from the Google Maps JS API shows a way to do this with repeating symbols on the line instead of creating new Polylines. In the context of your example, it would look something like this:

var allCoordinates = [
    new google.maps.LatLng(26.291, 148.027),
    new google.maps.LatLng(26.291, 150.027),
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027)
];

var polyline = new google.maps.Polyline({
    path: allCoordinates,
    strokeColor: color,
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
    icons: [{
        icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
        offset: '100%',
        repeat: '20px'
    }]
});
polyline.setMap(map);
polylines.push(polyline);

这篇关于如何在Google地图V3上的每个折线段上绘制箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！