javascript 如何在 Google Maps V3 的每个折线段上绘制箭头
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31305497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw an arrow on every polyline segment on Google Maps V3
提问by Martín C
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.
我一直在stackoverflow上寻找这个问题的解决方案,但由于我找不到准确的解决方案,我最终自己解决了这个问题并将其张贴在这里,希望它有所帮助。
Google Maps provides you the Polyline feature, which based on a list of coordinates can draw a series of lines joining all of them.
Google 地图为您提供折线功能,该功能基于坐标列表可以绘制一系列连接所有坐标的线。
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.
图标定义中的属性“repeat”可能是另一种选择,但仅允许以像素为单位定义度量,并且该定义不会与折线上的每次方向变化相匹配。
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!
我希望这适用于任何正在寻找这样的东西的人!
回答by coderroggie
There is a repeat property for the icon options object. The example of dashed lines from the Google Maps JS APIshows 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:
图标选项对象有一个重复属性。在从谷歌地图JS API虚线的例子显示了一种方法就行了重复的符号,而不是创造新的折线来做到这一点。在您的示例的上下文中,它看起来像这样:
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);
This creates arrows along the lines like so:
这会沿线创建箭头,如下所示:
回答by Brian Burns
Here is a version with a simpler loop and a custom symbol so you can resize and modify it as needed - the google.maps.SymbolPath.FORWARD_CLOSED_ARROW
is a fixed size - the scale
property doesn't affect it.
这是一个具有更简单循环和自定义符号的版本,因此您可以根据需要调整大小和修改它 - 这google.maps.SymbolPath.FORWARD_CLOSED_ARROW
是一个固定大小 - 该scale
属性不会影响它。
const drawLines = (map, maps, places) => {
const arrow = {
path: 'M 0,0 5,15 -5,15 0,0 z', // 0,0 is the tip of the arrow
fillColor: 'red',
fillOpacity: 1.0,
strokeColor: 'red',
strokeWeight: 1,
};
const newLines = [];
for (let i = 0; i < places.length - 1; i++) {
const line = new maps.Polyline({
path: places.slice(i, i+2),
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
icons: [{
icon: arrow,
offset: '100%',
}]
});
line.setMap(map);
newLines.push(line);
}
}