时间戳

首页 > 解决方案 > 我们如何使用方向服务在 Google 地图中应用动态折线颜色

javascript - 我们如何使用方向服务在 Google 地图中应用动态折线颜色

问题描述

我正在研究谷歌地图。我需要绘制不同颜色的折线。

这是我的代码。

var response = {
    "points": [
        [17.36603966, 78.45885158, 17.36608062, 78.46013904],
        [17.36608062, 78.46013904, 17.36644926, 78.46131921],
    ]
};

for (var i = 0; i < response.points.length; i++) {
    directionsService.route({
        'origin': response.points[i][0] + ',' + response.points[i][1],
        'destination': response.points[i][2] + ',' + response.points[i][3],
        'travelMode': 'DRIVING'
    }, function (directions, status) {       
        directionsDisplay = new google.maps.DirectionsRenderer({
            suppressInfoWindows: true,
            suppressMarkers: true,
            polylineOptions: {
                strokeColor:'red'
            },
            map: mymapid
        });       
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(directions);
        }
    });
};

如何为我的积分添加动态颜色？

标签： javascriptgoogle-maps

解决方案

请使用下面的代码

var response = {
    "points": [
        [17.36603966, 78.45885158, 17.36608062, 78.46013904,'green'],
        [17.36608062, 78.46013904, 17.36644926, 78.46131921,'red'],
    ]
};
var colorcollecetion=[];
var  colorpositionid=0;
for (var i = 0; i < response.points.length; i++) {
colorcollecetion.push(response.points[i][4]);
    directionsService.route({
        'origin': response.points[i][0] + ',' + response.points[i][1],
        'destination': response.points[i][2] + ',' + response.points[i][3],
        'travelMode': 'DRIVING'
    }, function (directions, status) {       
        directionsDisplay = new google.maps.DirectionsRenderer({
            suppressInfoWindows: true,
            suppressMarkers: true,
            polylineOptions: {
                strokeColor: colorcollecetion[colorpositionid]
            },
            map: mymapid
        });   
        colorpositionid++;
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(directions);
        }
    });
};

推荐阅读