Google maps 谷歌地图API v3-自定义驾驶方向标记

如何替换google maps api v3中的驾驶方向标记（而不是地图标记）

我在任何地方都没见过这样的例子

---

有时简单是关键

我用css回答了我的问题：

A行是一个表：

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

---

我也有同样的问题。与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
}

函数渲染驱动方向（方向响应）{
var directionRenderOptions={
地图：地图，
面板：方向面板，
suppressInfoWindows：对，
真的吗
};
var directionsrender=new google.maps.directionsrender（directionRenderOptions）；
directionsRenderer.setDirections（directionsResponse）；
/*将默认地图标记替换为自定义地图标记，原因如下：
1） 控制图标。（开始和结束的自定义图标）
2） 控制图标颜色（以匹配动作状态）
3） 单击标记时打开的控制信息窗口（添加调用/操作，添加到操作详细信息的链接）
但是，我们对线条和方向的文本输出使用默认渲染，因此加载后需要等待1.5秒
*/
window.setTimeout（
函数（）{
showWaypointMarkers（方向响应）；
showOriginDestinationMarkers（）；
},
1500
);
}
函数showWaypointMarkers（方向响应）{
var routeLegs=directionsResponse.routes[0]。legs；
var allImages=jQuery（directionsPanel.find（“img”）；
对于（变量i=0，len=routeLegs.length-1；i”
});
google.maps.event.addListener（标记，'click'，function（）{//当单击地图上的标记打开信息窗口时
信息窗口。打开（地图、标记）；
});
iconImageObj.click（函数（）{//单击行驶方向上的标记时，打开信息窗口
信息窗口。打开（地图、标记）；
});
}
函数showOriginDestinationMarkers（）{//此处为第一个和最后一个使用相同的图标
变量iconUrl=”https://chart.googleapis.com/chart?chst=d_map_pin_icon_withshadow&chld=home|000000 | FFFFFF；//主页图标
新的google.maps.Marker（{//将主位置添加到地图
位置：homeLocation，
地图：地图，
标题：messages.homeLocationTitle，
图标：{url:iconUrl}
});
jQuery（directionsPanel，“img”）.first（）.replaceWith（“”；//用我们的图标替换他们的图标
jQuery（directionsPanel，“img”）.last（）.replaceWith（“”；//用我们的图标替换他们的图标
}

---

为了避免使用计时器，我需要解析方向并自己显示它们。信息窗口具有基于航路点的自定义文本和指向详细信息页面的链接。

这仅适用于两种结果。你有没有想过如何在任意数量的路径点（腿）上使用它？@DannyC你必须设置一组腿，获得每个元素的css，并相应地设计每个元素的样式。回答得好。我也曾考虑过这样做，但也遇到了时间问题。这有点骇人听闻，但很有效！需要注意的是，我没有使用设置的超时，而是使用了google.maps.event.addListenerOnce（map'idle'，function（）{……}）；这不是个好主意。使用

suppressMarkers

并在需要的任何位置使用自定义图标创建自己的标记。这同样适用于另一个答案。

suppressMarkers

只影响地图的方向渲染，而不影响谷歌地图提供的文本方向

panel

。html直接来自谷歌，没有API选项来控制它。在这种情况下，正确的做法是解析

DirectionsResult

，并创建自己的定制面板。但这需要更多的工作。+1超级酷！DirectionsRenderer应支持原点和目标图标作为参数。对于DirectionsService使用SupersMarkers，但在DirectionsRenderer中却没有与之耦合的方法，这是不符合要求的。

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

    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
}