Question

如何在google maps api v3中替换行车路线标记（而非地图标记）？

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

enter image description here

Answer 1

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

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

Answer 2

有时简单是关键。

我用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;
}

Google Maps API v3 - 自定义驾车路线标记

2 个答案: