Google Maps Api v3：如何更改方向（设置）面板中的默认航点标记？

Posted 2023-05-06

【中文标题】Google Maps Api v3：如何更改方向（设置）面板中的默认航点标记？

【英文标题】：Google Maps Api v3: How to change the Default waypoint markers in the Directions (set)Panel?

【发布时间】：2015-01-21 23:38:16

【问题描述】：

如何在方向面板中使用地图中活动的自定义标记更改标记，并从正文更改颜色？非常感谢任何帮助。

截图：

http://i.stack.imgur.com/wYFoc.png

【问题讨论】：

简短回答：你不能。更长的答案：不要使用方向面板。创建您自己的，使用您需要的信息（来自路线服务响应）并添加您的自定义标记。

谢谢，我觉得做一个新面板确实更好，但是很烦人默认面板不能自定义那么容易，只能自定义背景颜色，但就像我说的，标记和小边框保持不变。

从响应中获取您需要的信息并在您自己的面板中解析它并不难。对于一个非常基本的实现，请在此处查看 writeDirectionsSteps 函数：jsfiddle.net/upsidown/rat1fkkc

@MrUpsidown 非常感谢，一些有用的代码以简单的方式解释！

【参考方案1】：

只是为了让@MrUpsidown 评论和代码保持活力：

简短的回答：你不能。更长的答案：不要使用方向 控制板。使用您需要的信息创建您自己的（来自 路线服务响应）并添加您的自定义标记。

Nov 24 at 16:32

Fiddle

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var routeBounds = false;
var overlayWidth = 200; // Width of the overlay DIV
var leftMargin = 30; // Grace margin to avoid too close fits on the edge of the overlay
var rightMargin = 80; // Grace margin to avoid too close fits on the right and leave space for the controls

overlayWidth += leftMargin;

var start = new google.maps.LatLng(3.148173, 101.7148792);
var end = new google.maps.LatLng(3.1347725, 101.6893408);

function initialize() 

    var btn1 = document.getElementById('calcRoute');
    btn1.addEventListener('click', calcRoute);

    var btn2 = document.getElementById('offsetMap');
    btn2.addEventListener('click', offsetMap);

    var btn3 = document.getElementById('fitAndOffsetMap');
    btn3.addEventListener('click', fitAndOffsetMap);

    var btn4 = document.getElementById('fitMap');
    btn4.addEventListener('click', fitMap);

    directionsDisplay = new google.maps.DirectionsRenderer(
        draggable: true
    );

    var mapOptions = 
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: start,
        panControlOptions: 
            position: google.maps.ControlPosition.TOP_RIGHT
        ,
        zoomControlOptions: 
            position: google.maps.ControlPosition.TOP_RIGHT
        
    ;

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    directionsDisplay.setMap(map);


function offsetMap() 

    if (routeBounds !== false) 

        // Clear listener defined in directions results
        google.maps.event.clearListeners(map, 'idle');

        // Top right corner
        var topRightCorner = new google.maps.LatLng(map.getBounds().getNorthEast().lat(), map.getBounds().getNorthEast().lng());

        // Top right point
        var topRightPoint = fromLatLngToPoint(topRightCorner).x;

        // Get pixel position of leftmost and rightmost points
        var leftCoords = routeBounds.getSouthWest();
        var leftMost = fromLatLngToPoint(leftCoords).x;
        var rightMost = fromLatLngToPoint(routeBounds.getNorthEast()).x;

        // Calculate left and right offsets
        var leftOffset = (overlayWidth - leftMost);
        var rightOffset = ((topRightPoint - rightMargin) - rightMost);

        // Only if left offset is needed
        if (leftOffset >= 0) 

            if (leftOffset < rightOffset) 

                var mapOffset = Math.round((rightOffset - leftOffset) / 2);

                // Pan the map by the offset calculated on the x axis
                map.panBy(-mapOffset, 0);

                // Get the new left point after pan
                var newLeftPoint = fromLatLngToPoint(leftCoords).x;

                if (newLeftPoint <= overlayWidth) 

                    // Leftmost point is still under the overlay
                    // Offset map again
                    offsetMap();
                

             else 

                // Cannot offset map at this zoom level otherwise both leftmost and rightmost points will not fit
                // Zoom out and offset map again
                map.setZoom(map.getZoom() - 1);
                offsetMap();
            
        
    


function fromLatLngToPoint(latLng) 

    var scale = Math.pow(2, map.getZoom());
    var nw = new google.maps.LatLng(map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng());
    var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
    var worldCoordinate = map.getProjection().fromLatLngToPoint(latLng);

    return new google.maps.Point(Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale));


function calcRoute() 

    var request = 
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    ;

    directionsService.route(request, function (response, status) 

        if (status == google.maps.DirectionsStatus.OK) 

            directionsDisplay.setDirections(response);

            // Define route bounds for use in offsetMap function
            routeBounds = response.routes[0].bounds;

            // Write directions steps
            writeDirectionsSteps(response.routes[0].legs[0].steps);

            // Wait for map to be idle before calling offsetMap function
            google.maps.event.addListener(map, 'idle', function () 

                // Offset map
                offsetMap();
            );

            // Listen for directions changes to update bounds and reapply offset
            google.maps.event.addListener(directionsDisplay, 'directions_changed', function () 

                // Get the updated route directions response
                var updatedResponse = directionsDisplay.getDirections();

                // Update route bounds
                routeBounds = updatedResponse.routes[0].bounds;

                // Fit updated bounds
                map.fitBounds(routeBounds);

                // Write directions steps
                writeDirectionsSteps(updatedResponse.routes[0].legs[0].steps);

                // Offset map
                offsetMap();
            );
        
    );


function writeDirectionsSteps(steps) 

    var overlayContent = document.getElementById("overlayContent");
    overlayContent.innerhtml = '';

    for (var i = 0; i < steps.length; i++) 

        overlayContent.innerHTML += '<p>' + steps[i].instructions + '</p><small>' + steps[i].distance.text + '</small>';
    


function fitMap() 

    if (routeBounds !== false) 

        map.fitBounds(routeBounds);
    


function fitAndOffsetMap() 

    if (routeBounds !== false) 

        map.fitBounds(routeBounds);
        offsetMap();
    


initialize();

body 
    margin:0;
    padding:0;
    font-family: Arial;

#map-canvas 
    height:450px;
    width:950px;

#overlay 
    position: absolute;
    width: 200px;
    height: 450px;
    background: black;
    opacity: .8;
    top: 0;
    left: 0;
    overflow: auto;

#overlayContent 
    color: white;
    padding: 10px 20px;

#overlayContent p 
    font-size: 12px;
    margin: 6px 0;

#overlayContent small 
    display: block;
    text-align: right;
    font-style: italic;

small 
    font-size: 9px;

i 
    color: lightblue;

h1 
    font-size: 20px;

h5 
    font-size: 12px;

button 
    margin: 20px 0 0 20px;

<div id="map-canvas"></div>
<div id="overlay">
    <div id="overlayContent">
         <h1>DIV OVERLAY</h1>

         <h5>Routes should not be drawn below this element.</h5>

         <h5>Click the <i>Calc route</i> button to draw the directions route.</h5>

         <h5><i>Map offset</i> will be applied automatically.</h5>

         <h5><i>Drag the route</i> to see how it is applied.</h5>

         <h5>Click the <i>Offset map</i> button to reapply the offset.</h5>

         <h5>Click the <i>Fit only</i> button to only fit route bounds.</h5>

         <h5>Click the <i>Fit and offset map</i> button to fit to route bounds and reapply offset.</h5>

    </div>
</div>
<button id="calcRoute">Calc route</button>
<button id="offsetMap">Offset map</button>
<button id="fitMap">Fit only</button>
<button id="fitAndOffsetMap">Fit and offset map</button>

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>