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

Google Maps - Default Pins Still Showing and Obscuring Custom Icons

本文关键字：模糊 自定义 图标 显示 默认 引脚 谷歌地图      更新时间：2023-09-26

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

基本上我显示了两个(英国)邮编之间的方向，一切都很好，但在尝试移动到自定义地图图标后，原始的，默认的A和B标记仍然显示和模糊了自定义的标记，但我看不出它们是如何仍然被添加到地图上的。

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

我试着添加一个函数来清除标记，但是我试着在任何地方使用它都不能解决问题。

我认为有些东西运行了两次，但我在调试时没有发现任何东西

设置DirectionsRenderer的suppressMarkers选项为true

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

相关文章：