Question

我在这里准备了一个样本小提琴 - http://jsfiddle.net/F4gDW/6/

基本上我正在显示两个（英国）邮政编码之间的路线，一切正常但在尝试移动到自定义地图图标后，原始的默认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;
}

我尝试添加一个清除标记的功能但是我尝试使用它的任何地方都无法解决问题。

我认为有些东西已经运行了两次，但到目前为止，我一直没有找到任何东西。

Answer 1

将DirectionsRenderer的选项suppressMarkers设置为true

http://jsfiddle.net/F4gDW/7/

谷歌地图 - 默认引脚仍然显示和遮盖自定义图标

1 个答案: