0

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

改变颜色，让每条路线都是不同的颜色？ -解决了-

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

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);
});
}

任何帮助或提示都会很棒

4

1 回答 1

0

这是一个大问题，实际上它似乎真的应该是 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
});
于 2013-06-18T08:29:06.060 回答