Google Maps API v3 - 自定義行車路線標記

Question

如何替換google maps api v3中的行車路線標記（而不是地圖標記）？

我還沒有看到任何地方這樣的例子......

Answer 1

有時候，簡單是關鍵。

我回答我的問題，通過使用CSS：

A線是一個表：

<table id="adp-placemark" class="adp-placemark" jstcache="0"> 

和B線：

<table class="adp-placemark" jstcache="0"> 

所以下面的CSS將改變標誌：

#adp-placemark img, .adp-placemark img { 
    display:none; 
} 
#adp-placemark { 
    font-weight: bold; 
    padding: 10px 10px 10px 30px; 
    background: white url(../images/map_icons/number_1.png) no-repeat left center; 
} 
.adp-placemark { 
    font-weight: bold; 
    padding: 10px 10px 10px 30px; 
    background: white url(../images/map_icons/number_2.png) no-repeat left center; 
} 

Answer 2

我有同樣的問題。與Jason使用CSS的解決方案類似，我使用jQuery手動將圖標圖像替換爲我自己的圖標圖像。這使我可以在地圖和方向上使用相同的圖標圖像。這還允許我在地圖或路線面板中點擊標記時使用點擊處理程序打開相同的信息窗口。我爲家庭和結束位置使用不同的圖標，併爲航點使用升序數字標記。一個令人討厭的警告是，我需要使用JavaScript計時器等待1.5秒，所以我可以確定指示完成呈現，因爲它是異步的，並且沒有回調。圖像只有添加到DOM後才能被替換。 這裏是我的代碼：

function renderDrivingDirections(directionsResponse){ 
    var directionRenderOptions = { 
      map: map, 
      panel: directionsPanel, 
      suppressInfoWindows: true, 
      suppressMarkers: true 
    }; 
    var directionsRenderer = new google.maps.DirectionsRenderer(directionRenderOptions); 
    directionsRenderer.setDirections(directionsResponse); 
    /* Replace the default map markers with custom ones for following reasons: 
     1) Control over icon. (Custom icons for start and finish) 
     2) Control over icon color (to match the action status) 
     3) Control infowindow that opens on marker click (Add Call/Action, add link to action details) 
     However, we using the default rendering for the lines, and for text output of directions. So we need to wait 1.5 seconds after load 
    */ 
    window.setTimeout( 
      function(){ 
       showWaypointMarkers(directionsResponse); 
       showOriginDestinationMarkers(); 
      }, 
      1500 
    ); 
} 

function showWaypointMarkers(directionsResponse) { 
    var routeLegs = directionsResponse.routes[0].legs; 
    var allImages = jQuery(directionsPanel).find("img"); 
    for (var i = 0, len = routeLegs.length -1; i < len; i++) { 
     var iconUrl = "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=" + (i+1) + "|ffffff|000000"; 
     var marker = new google.maps.Marker({ 
      position: routeLegs[i+1].start_location, 
      map: map, 
      title: "Stop number: " + i, 
      icon: {url: iconUrl} 
     }); 
     var iconImageObj = jQuery("<img src='" + iconUrl + "'>"); 
     attachInfoWindow(marker, iconImageObj, i, routeLegs[i+1]);    
     allImages.eq(i+1).replaceWith(iconImageObj); 
    } 
} 

function attachInfoWindow(marker, iconImageObj, legIndex, leg) { 
    var infowindow = new google.maps.InfoWindow({ 
     content: "<div><h3>Stop Number: " + legIndex + "</h3><p>" + leg.start_address + "</p><a href='#'>(Stop Details)</a></div>" 
    }); 
    google.maps.event.addListener(marker, 'click', function(){ //when the marker on map is clicked open info-window 
     infowindow.open(map,marker); 
    }); 
    iconImageObj.click(function(){ //when the marker on the driving directions is clicked, open info-window 
     infowindow.open(map,marker); 
    }); 
} 
function showOriginDestinationMarkers(){ //here using same icon for first and last 
    var iconUrl = "https://chart.googleapis.com/chart?chst=d_map_pin_icon_withshadow&chld=home|000000|FFFFFF"; //home icon 
    new google.maps.Marker({ //add home location to map 
     position: homeLocation, 
     map: map, 
     title: messages.homeLocationTitle, 
     icon: {url: iconUrl} 
    }); 
    jQuery(directionsPanel, "img").first().replaceWith("<img src='" + iconUrl + "'>"); //replace their icon with ours 
    jQuery(directionsPanel, "img").last().replaceWith("<img src='" + iconUrl + "'>"); //replace their icon with ours 
} 

要避免使用定時器，我需要解析的方向，並顯示他們自己。信息窗口具有基於航點的自定義文本和指向詳細信息頁面的鏈接。