Question

我修改了这个演示，因为它几乎完成了我所需要的一切。 http://joshdcompton.com/google_maps/mult_directions/test.html 只需要在粗体

中提供以下帮助

更改颜色以使每条路线的颜色不同？ -SOLVED -

尝试使用我上一个脚本的一部分，但它打破了页面

polylineOptions.strokeColor="#ff0000";
polylineOptions.strokeOpacity=.6;
polylineOptions.strokeWeight=3;

更改标记的颜色以匹配路径？ 尝试了更多的脚本而不是我可以计算的任何脚本。

添加一个标记（只有1个停靠点的路线）？ 脚本效果很好，但在 if（JL == 1）{分页符。

向信息气球添加信息？

我需要显示工作类型，客户名称和时间。

我是一名业余编码员，这段代码很多都比我的技能水平高一点，但我能够做出一些我需要的改变。这是我的完整代码

HTML

<body onLoad="initialize();">
<div id="map_canvas" style="width:650px; height: 650px; margin:auto; background-color: #999;"></div>

的JavaScript

var map;
var directionsDisplay;
var start;
var rendererOptions = {
        draggable: true,
    };
var directionsService = new google.maps.DirectionsService;   

jobs1 = [{location:"3660 Las Vegas Blvd S #12 Las Vegas, NV 89109"},{location:"3978 SPANISH BARB LAS VEGAS, NV 89122"}];    
jobs2 = [{location:"4722 Cecile Ave Las Vegas NV 89115"}];
jobs3 = [{location:"1554 W Warm Springs Rd HENDERSON NV 89014"},{location:"8715 Orvieto Dr LAS VEGAS NV 89117"},{location:"3514 LA SCALA CT. NORTH LAS VEGAS NV 89032"}];   

var polylineOpts1 = {map: map,strokeColor:'#0000ff', strokeWidth: 3, strokeOpacity: 0.5}
var polylineOpts2 = {map: map,strokeColor:'#00ff00', strokeWidth: 3, strokeOpacity: 0.5}
var polylineOpts3 = {map: map,strokeColor:'#ff0000', strokeWidth: 3, strokeOpacity: 0.5}

var markerOpts1 = {map: map,icon:'http://maps.google.com/mapfiles/marker_greenA.png'}
var markerOpts2 = {map: map,icon:'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green.png'}
var markerOpts3 = {map: map,icon:'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red.png'}


function initialize(){
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    var lasvegas = new google.maps.LatLng(42.277817,-83.733673);
var myOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: lasvegas,
}
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);

for(i=1;i<=3;i++){
    requestDirections(i);       
}
}

function renderDirections(result , p) {
var polylineOpts = eval("polylineOpts"+p)
var markerOpts = eval("markerOpts"+p)

    var directionsRenderer = new google.maps.DirectionsRenderer({
        polylineOptions: polylineOpts,
        markerOptions:markerOpts,
    });
  directionsRenderer.setMap(map);
  directionsRenderer.setDirections(result);
}
    function requestDirections(p) {
job=eval("jobs"+p)
JL=job.length
start=job[0]['location']
end=job[job.length-1]['location']
job.shift();
job.pop();
    directionsService.route({
    origin: start,
optimizeWaypoints: true,
    waypoints: job,
destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function(result) {
    renderDirections(result,p);
});
}

任何帮助或提示都会很棒

Answer 1

这是一个很大的问题，事实上它似乎应该是4个单独的问题。您可能想要将其拆分。此外，您应该尝试简化代码，让它工作（您的链接对我不起作用），然后使用它作为问题的基础，例如，如何为不同颜色的方向着色。

因此，只处理问题1，DirectionsRequest不会使用polylineOptions对象，这是您尝试在此处执行的操作：

//polyline options don't exactly work
//var polylineOpts = {map: map, strokeColor:'#000000', strokeWidth: 3, strokeOpacity: 0.5}

var directionsService = new google.maps.DirectionsService;
function requestDirections(start, end) {
    directionsService.route({
        origin: start,
        waypoints: waypts,
        optimizeWaypoints: true,
        destination: end,
        //polylineOptions: polylineOpts,
        travelMode: google.maps.DirectionsTravelMode.BICYCLING
    }, function(result) {
        renderDirections(result);
    });
}

然而DirectionsRendererOptions类确实如此。例如这应该设置一种颜色：

var polylineOpts = {map: map, strokeColor:'#000000', strokeWidth: 3, strokeOpacity: 0.5}
var directionsRenderer = new google.maps.DirectionsRenderer({
  polylineOptions: polylineOpts
});

Google地图帮助（多路径地图4个问题）

1 个答案: