Javascript 谷歌地图-默认PIN仍然显示和模糊自定义图标

我在这里准备了一把小提琴样品-

基本上，我正在显示两个（英国）邮政编码之间的方向，一切正常，但在尝试移动到自定义地图图标后，原始的默认

A

和

B

标记仍在显示和模糊自定义标记，但我看不出它们是如何添加到地图中的

HTML

<div id="map_canvas" class="gmaps"></div>

JS/jQuery

var rendererOptions = {
    draggable: true,
    polylineOptions: {
       strokeColor: '#e02222'
    }
};

var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var markers = [];
var map;

var uk = new google.maps.LatLng(55, -3.3);

initialize();

/* In click function in production code */
var start = 'SW1A 2AA';
var end = 'SW1A 1AA';
showRoute(start, end);
/***************************************/

function initialize() {

    var myOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: uk
        // map styles excluded to save space
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    directionsDisplay.setMap(map);
}

// Start/Finish icons
var icons = {
    start: new google.maps.MarkerImage(
        'http://www.fprealtors.com/vendor/images/icons/marker.png',
        new google.maps.Size(20, 20),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 20)),
    end: new google.maps.MarkerImage(
        'http://www.fprealtors.com/vendor/images/icons/marker.png',
        new google.maps.Size(20, 20),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 20))
};

function showRoute(from, to) {

    // Now calculate route
    var request = {
        origin: from,
        destination: to,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var leg = response.routes[0].legs[0];
            makeMarker(leg.start_location, icons.start, 'A-End');
            makeMarker(leg.end_location, icons.end, 'B-End');
        } 
    });

}

function makeMarker(position, icon, title) {
    var marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: icon,
        animation: google.maps.Animation.DROP,
        title: title
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', toggleBounce);
}

function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
    }
    return total;
}

function toggleBounce() {

    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}

function clearOverlays() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
    markers.length = 0;
}

var renderoptions={
真的，
多段线选项：{
strokeColor:“#e02222”
}
};
var directionsDisplay=new google.maps.directionsrender（renderoptions）；
var directionsService=new google.maps.directionsService（）；
var标记=[]；
var映射；
var uk=新的google.maps.LatLng（55，-3.3）；
初始化（）；
/*在生产代码中单击功能*/
风险值开始='SW1A 2AA'；
var端=‘SW1A 1AA’；
展示路线（开始、结束）；
/***************************************/
函数初始化（）{
变量myOptions={
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：英国
//排除贴图样式以节省空间
};
map=new google.maps.map（document.getElementById（'map\u canvas'），myOptions）；
方向显示.setMap（地图）；
}
//开始/完成图标
变量图标={
开始：新建google.maps.MarkerImage(
'http://www.fprealtors.com/vendor/images/icons/marker.png',
新google.maps.Size（20,20），
新的google.maps.Point（0,0），
新google.maps.Point（10,20）），
结束：新建google.maps.MarkerImage(
'http://www.fprealtors.com/vendor/images/icons/marker.png',
新google.maps.Size（20,20），
新的google.maps.Point（0,0），
新谷歌地图点（10,20））
};
功能显示路线（从、到）{
//现在计算路线
var请求={
出处:从,，
目的地：至，
travelMode:google.maps.Directions travelMode.WALKING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var leg=response.routes[0]。legs[0]；
makeMarker（leg.start_位置，icons.start，“A-End”）；
makeMarker（leg.end_位置，icons.end，'B-end'）；
} 
});
}
功能标记（位置、图标、标题）{
var marker=new google.maps.marker({
职位:职位,，
地图：地图，
图标：图标，
动画：google.maps.animation.DROP，
标题：标题
});
标记器。推（标记器）；
google.maps.event.addListener（标记'click'，toggleBounce）；
}
函数ComputeTotalInstance（结果）{
var合计=0；
var myroute=result.routes[0]；
对于（i=0；i

我尝试添加一个函数来清除标记，但无论我在哪里尝试使用它都无法解决问题

---

我想有东西运行了两次，但我在调试时还没有找到任何东西。

将DirectionRenderer的选项

suppressMarkers

设置为

true

---

啊，谢谢，我不知道这个选项存在，但是只有一件事，你不能点击标记打开他们的信息框，而是抛出了这个错误：

未捕获引用错误：没有定义标记

，有什么想法让这两个都起作用吗？这些标记没有绑定信息框。在

点击

-回调中，用

此

替换

标记

可以修复此错误：啊，是的，对不起，被自己的代码弄糊涂了一会儿，信息框出现在默认的

a

和

B

标记上，我只需要查看如何再次将其添加到单击处理程序中。您可以通过directionsResult获取信息窗口的内容。对于起始标记，它将是第一段的

start\u地址

，对于结束标记，它将是最后一段的

end\u地址

（在您的情况下，第一段和最后一段是相等的，因为您不使用航路点）