Question

这是我的代码：

    var icons = 
        {
            start: new google.maps.MarkerImage(
                'design/image/icons/map/user.png'
            ),
            end: new google.maps.MarkerImage(
                'design/image/icons/map/business.png'
            )
        };

        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();

        directionsDisplay.suppressMarkers = true;

        var oPos = new google.maps.LatLng(fLat, fLong);
        var oUserPos = new google.maps.LatLng(fUserLat, fUserLong);

        var map = new google.maps.Map(document.getElementById(sElement), {
            zoom: 11,
            center: oPos,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [
                {
                    featureType: "poi.business",
                    elementType: "labels",
                    stylers: [
                        {visibility: "off"}
                    ]
                }
            ]
        });

        directionsDisplay.setMap(map);

        var request = {
            origin: oUserPos,
            destination: sAddress,
            travelMode: google.maps.TravelMode.DRIVING
        };

        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);
                makeMarker(leg.end_location, icons.end);
            }
        });

        function makeMarker(position, icon, title)
        {
            new google.maps.Marker(
            {
                position: position,
                map: map,
                icon: icon
            });
        }

        if ( sMapType == 'event' )
        {
            $('#' + sElement + '_legend').append('<div style="padding: 2px 0px;"><img src="design/image/icons/map/user.png" class="v_align_m"> Your Location</div>');
            $('#' + sElement + '_legend').append('<div style="padding: 2px 0px;"><img src="design/image/icons/map/business.png" class="v_align_m"> Location</div>');
        }
        else
        {
            $('#' + sElement + '_legend').append('<div style="padding: 2px 0px;"><img src="design/image/icons/map/user.png" class="v_align_m"> Your Location</div>');
            $('#' + sElement + '_legend').append('<div style="padding: 2px 0px;"><img src="design/image/icons/map/business.png" class="v_align_m"> Business</div>');
                    $('#' + sElement + '_legend').append('<div style="padding: 2px 0px;"><div style="width:32px;height:32px;background:#B9B9B9;border: 2px solid #000000;" class="inline v_align_m"></div> <div class="inline">Service Area</div></div>');
                }   
    }
    else
    {
        var oPos = new google.maps.LatLng(fLat, fLong);

        var map = new google.maps.Map(document.getElementById(sElement), {
            zoom: 11,
            center: oPos,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker(
        {
            icon: 'design/image/icons/map/business.png',
            map: map,
            position: oPos
        });

        if ( sMapType == 'event' )
        {
            $('#' + sElement + '_legend').append('<div style="padding: 2px 0px;"><img src="design/image/icons/map/business.png" class="v_align_m"> Location</div>');
        }
        else
        {
            $('#' + sElement + '_legend').append('<div style="padding: 2px 0px;"><img src="design/image/icons/map/business.png" class="v_align_m"> Business</div>');
                    $('#' + sElement + '_legend').append('<div style="padding: 2px 0px;"><div style="width:32px;height:32px;background:#B9B9B9;border: 2px solid #000000;" class="inline v_align_m"></div> <div class="inline">Service Area</div></div>');
                }
    }

    var legend = document.getElementById(sElement + '_legend');
    map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend);


        oShape = new google.maps.Polygon(
    {
        fillColor: "#000000",
        fillOpacity: 0.3,
        paths: volusiaCounty,
        strokeColor: "#000000",
        strokeOpacity: 0.3,
        strokeWeight: 2
    });

    //Add shape to map
    oShape.setMap(map);
    }
</script>
    <script type="text/javascript">
$(document).ready(function()
    {
    initializeMap('29.118694', '-80.998041', "3959 South Nova Road #1 Port Orange, Fl 32127");
    });
    </script>

基本上问题是我的客户标记和旧的A，B图标出现了。我是否需要做一些额外的事情来保持A和B的显示？

Answer 1

您需要suppress markers in the DirectionsRenderer

var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true});

字母“A”和“B”显示在自定义标记之上

1 个答案: