关键词：
【中文标题】如何使用多色折线绘制谷歌地图航路点【英文标题】：how to draw a google maps waypoint with multi-colored polylines 【发布时间】：2016-06-29 14:11:57 【问题描述】：您好，我尝试在谷歌地图上绘制带有方向航路点的折线。
我尝试过类似的方法。 My draw 我想像这样画出不同颜色的路线。
Google maps directions example ss
我写了这个示例代码。
function initMap()
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'),
zoom: 6,
center: lat: 41.85, lng: -87.65
);
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
function calculateAndDisplayRoute(directionsService, directionsDisplay)
var waypts = [
location: '41.062317, 28.899756',
stopover: true
,
location: '41.062276, 28.898866',
stopover: true
,
location: '41.061993, 28.8982',
stopover: true
];
directionsService.route(
origin: lat: 41.063328, lng:28.901215,
destination:lat: 41.060756, lng:28.900046,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
, function(response, status)
if (status === google.maps.DirectionsStatus.OK)
directionsDisplay.setOptions(
directions :response,
)
drawpolylines(directionsDisplay.getMap())
var route = response.routes[0];
else
window.alert('Directions request failed due to ' + status);
);
function drawpolylines(map)
var flightPlanCoordinates = [
lat: 41.062317, lng: 28.899756,
lat: 41.062276, lng: 28.898866,
];
var flightPath = new google.maps.Polyline(
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
);
flightPath.setMap(map);
【问题讨论】：
【参考方案1】：您需要为每个彩色线段创建单独的折线。下面的示例使用来自此相关问题的 renderDirectionsPolylines 的修改版本：Google Maps click event on route（修改为使用颜色数组，将每种颜色应用于数字路径中的步骤）。
proof of concept fiddle
代码 sn-p：
var map;
var infowindow = new google.maps.InfoWindow();
function initMap()
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer(
suppressPolylines: true,
infoWindow: infowindow
);
map = new google.maps.Map(document.getElementById('map'),
zoom: 6,
center:
lat: 41.85,
lng: -87.65
);
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
function calculateAndDisplayRoute(directionsService, directionsDisplay)
var waypts = [
location: '41.062317, 28.899756',
stopover: true
,
location: '41.062276, 28.898866',
stopover: true
,
location: '41.061993, 28.8982',
stopover: true
];
directionsService.route(
origin:
lat: 41.063328,
lng: 28.901215
,
destination:
lat: 41.060756,
lng: 28.900046
,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
, function(response, status)
if (status === google.maps.DirectionsStatus.OK)
directionsDisplay.setOptions(
directions: response,
)
var route = response.routes[0];
renderDirectionsPolylines(response, map);
else
window.alert('Directions request failed due to ' + status);
);
google.maps.event.addDomListener(window, "load", initMap);
var polylineOptions =
strokeColor: '#C83939',
strokeOpacity: 1,
strokeWeight: 4
;
var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];
var polylines = [];
function renderDirectionsPolylines(response)
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < polylines.length; i++)
polylines[i].setMap(null);
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++)
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++)
var nextSegment = steps[j].path;
var stepPolyline = new google.maps.Polyline(polylineOptions);
stepPolyline.setOptions(
strokeColor: colors[i]
)
for (k = 0; k < nextSegment.length; k++)
stepPolyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
polylines.push(stepPolyline);
stepPolyline.setMap(map);
// route click listeners, different one on each step
google.maps.event.addListener(stepPolyline, 'click', function(evt)
infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
infowindow.setPosition(evt.latLng);
infowindow.open(map);
)
map.fitBounds(bounds);
html,
body,
#map
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>【讨论】：
如何在谷歌地图中高效地绘制多条折线？
】如何在谷歌地图中高效地绘制多条折线？【英文标题】：HowtoDrawManyPolylinesinGoogleMapEfficiently?【发布时间】：2015-07-0804:54:26【问题描述】：我目前正在学习制作一个使用谷歌地图向用户显示数据的安卓应用。目前我正在使用折线... 查看详情
如何在谷歌地图的折线中点绘制标记？
】如何在谷歌地图的折线中点绘制标记？【英文标题】：HowtoplotthemarkerinthemiddlepointofthepolylineinGoogleMaps?【发布时间】：2017-05-1310:24:49【问题描述】：我在Google地图中绘制了一条折线，当单击折线时，我希望在折线上有一个标记。... 查看详情
谷歌地图折线渲染不完美
...fectly【发布时间】：2017-07-1606:07:09【问题描述】：我正在使用最新的iOS谷歌地图API绘制折线。我正在逐点构建折线，但它没有正确渲染，因为当我从地图中缩小折线消失（不是字面意思）时，当我放大它时，它只显示了这条线。... 查看详情
使用当前位置将折线绘制到目的地，并在谷歌地图上添加标记，标记颤动
】使用当前位置将折线绘制到目的地，并在谷歌地图上添加标记，标记颤动【英文标题】：Usecurrentlocationtodrawpolylinestoadestinationandalsotoaddmarkersongooglemapswithmarkersflutter【发布时间】：2021-09-2311:53:11【问题描述】：我有一个带有谷歌... 查看详情
如何保存谷歌地图绘制的折线路径？
】如何保存谷歌地图绘制的折线路径？【英文标题】：Howtosavepolylinepathdrawnbygooglemap?【发布时间】：2018-05-1304:26:45【问题描述】：嘿朋友们，当用户（智能手机）在我的应用程序中从一个位置移动到另一个位置时，我正在显示路... 查看详情
java示例代码_谷歌地图如何´"；优化航路点和#34；解决旅行推销员的问题
java示例代码_谷歌地图如何´"；优化航路点和#34；解决旅行推销员的问题 查看详情
谷歌地图方向服务航路点超过 50 个
...50多个航点中找到最佳航点订单列表。该怎么做？我可以使用Start+Destination+8Waypoints找到航点顺序，但我需要超过50个航点的帮助【问题讨论】：目前，在20 查看详情
如何在 android 传递 json 数组的谷歌地图上绘制折线？
】如何在android传递json数组的谷歌地图上绘制折线？【英文标题】：Howtodrawpolylineongooglemapinandroidpassingjsonarray?【发布时间】：2017-12-2219:30:19【问题描述】：嘿伙计们，我正在研究车辆跟踪系统的项目，当用户可以输入车辆数量时... 查看详情
绘制折线捕捉到道路Android谷歌地图应用程序
】绘制折线捕捉到道路Android谷歌地图应用程序【英文标题】：DrawpolylinesnaptoroadAndroidgooglemapsapp【发布时间】：2015-07-1601:50:53【问题描述】：我目前正在开发一个android谷歌地图应用程序帮助获取地图上2点之间的方向。我能够从谷... 查看详情
如何在谷歌地图中绘制折线在用户位置和标记之间颤动？
】如何在谷歌地图中绘制折线在用户位置和标记之间颤动？【英文标题】：Howtodrawpolylineingooglemapsflutterbetweenuserlocationandamarker?【发布时间】：2022-01-1022:48:36【问题描述】：这是我在这个网站上的第一篇文章，所以我希望能得到我... 查看详情
如何在路线谷歌地图v2 android上绘制交互式折线
】如何在路线谷歌地图v2android上绘制交互式折线【英文标题】：HowtodrawinteractivePolylineonroutegooglemapsv2android【发布时间】：2013-06-2919:34:13【问题描述】：我有以下代码为我绘制折线并且工作正常，但问题是它没有绘制交互式折线，... 查看详情
如何根据gps位置纬度动态扩展谷歌地图的折线
】如何根据gps位置纬度动态扩展谷歌地图的折线【英文标题】：Howtoextendpolylineofgooglemapsbasedongpslocationlatitudesandlangitudesdynamically【发布时间】：2016-04-0412:28:03【问题描述】：最初创建了折线并为其添加了一些路径。创建这条折线... 查看详情
如何在 JavaScript 中围绕折线绘制多边形？
】如何在JavaScript中围绕折线绘制多边形？【英文标题】：HowtodrawapolygonaroundapolylineinJavaScript?【发布时间】：2013-10-2213:22:39【问题描述】：我想在折线周围画一个多边形。在我的例子中，折线是一个谷歌地图方向，我需要在谷歌... 查看详情
如何添加infowindow距离和时间像谷歌地图的折线连接两个点?(代码片段)
我工作在离子离子谷歌地图应用程序和使用谷歌提供的本机和方向服务我甲型肝炎多个途径,使用以下代码:calculateAndDisplayRoute()varpoints=[];this.directionsService.route(origin:this.start,destination:this.end,travelMode:‘DRIVING‘,provideRouteAlternativ 查看详情
Android - 如何让谷歌地图显示一条动画连续闪烁点的折线
】Android-如何让谷歌地图显示一条动画连续闪烁点的折线【英文标题】：Android-HowtomakegoogleMapsdisplayapolylinethatanimatessequenctialflashingdots【发布时间】：2019-05-2022:41:10【问题描述】：我正在寻找一种方法来为Android设备中谷歌地图上两... 查看详情
实时绘制折线
...法是什么。所以它只会显示用户走过的路径。我正在考虑使用当前位置作为目的地并在用户移动时重新绘制折线。编辑：我什至不确定谷歌地图是否适合这种特殊情况，因为这个应用程序是免费的，而且每天调用超过2500次的API... 查看详情
如何使用谷歌地图获取折线中的坐标？
】如何使用谷歌地图获取折线中的坐标？【英文标题】：Howtogetcoordinatesinpolylineusinggooglemap?【发布时间】：2020-10-2604:29:07【问题描述】：我试图在谷歌地图中创建一条折线。它已创建并且折线也可以正常工作。但我需要什么时候... 查看详情
如何在谷歌地图android中显示当前位置的平滑移动
】如何在谷歌地图android中显示当前位置的平滑移动【英文标题】：Howtodisplaysmoothmovementofcurrentlocationingooglemapandroid【发布时间】：2018-03-0710:30:33【问题描述】：我正在实现一个地图导航应用程序。我每1000毫秒获取设备的当前位置... 查看详情