Google Maps API v3：如何更改Directions（set）面板中的默认航点标记？ [英] Google Maps Api v3: How to change the Default waypoint markers in the Directions (set)Panel?

问题描述

如何在路线面板中使用地图中的自定义标记更改标记并更改颜色以及身体的颜色？任何帮助大加赞赏。

截图：

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

解决方案

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

简短的回答：你不能。较长的回答：不要使用路线
面板。创建您自己的信息，并提供您所需的信息（从
方向的服务响应）并添加您的自定义标记。 a href =https://stackoverflow.com/questions/27101782/google-maps-api-v3-how-to-change-the-default-waypoint-markers-in-the-directions#comment42721997_27101782> 11月24日在16:32

小提琴

a>

var directionsDisplay; var directionsService = new google.maps.DirectionsService（ ）; var map; var routeBounds = false; var overlayWidth = 200; //覆盖的宽度DIVvar leftMargin = 30; //格雷斯边缘避免太贴近边缘overlayvar rightMargin = 80; //格雷斯边缘，以避免太接近适合的权利，并留下controlsoverlayWidth + = leftMargin; var start = new google.maps.LatLng（3.148173,101.7148792）; var end = new google.maps.LatLng（3.1347725,101.6893408 ）;函数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）;}函数offsetMap（）{if（routeBounds！== false）{//清除在方向结果中定义的侦听器google.maps.event.clearListeners（map，'idle'）; //右上角var topRightCorner = new google.maps.LatLng（map.getBounds（）。getNorthEast（）。lat（），map.getBounds（）。getNorthEast（）。lng（））; //右上角的顶点var topRightPoint = fromLatLngToPoint（topRightCorner）.x; //获取最左和最右点的像素位置var leftCoords = routeBounds.getSouthWest（）; var leftMost = fromLatLngToPoint（leftCoords）.x; var rightMost = fromLatLngToPoint（routeBounds.getNorthEast（））。x; //计算左右偏移量var leftOffset =（overlayWidth - leftMost）; var rightOffset =（（topRightPoint - rightMargin） - rightMost）;如果（leftOffset> = 0）{if（leftOffset< rightOffset）{var mapOffset = Math.round（（rightOffset - leftOffset）/ 2），则仅需要左偏移量。 //通过在x轴上计算的偏移量平移地图map.panBy（-mapOffset，0）; //获得pan后的新左点var newLeftPoint = fromLatLngToPoint（leftCoords）.x; if（newLeftPoint< = overlayWidth）{//最左边的点仍然在overlay // Offset map offsetMap（）; }} else {//无法在此缩放级别偏移地图，否则最左侧和最右侧的点不适合//缩小并再次偏移地图map.setZoom（map.getZoom（） - 1）; offsetMap（）; }}}}函数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）; 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）; //定义用于offsetMap函数的路由边界routeBounds = response.routes [ 0] .bounds; // Write directions steps writeDirectionsSteps（response.routes [0] .legs [0] .steps）; //在调用offsetMap函数之前等待地图空闲google.maps.event.addListener（map，' （）; //偏移地图offsetMap（）;}）; //监听方向变化以更新边界并重新应用偏移量google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{//获取更新的路线方向响应var updatedResponse = directionsDisplay.getDirections（）; //更新路线界限routeBounds = updatedRespo nse.routes [0] .bounds; // Fit updated bounds map.fitBounds（routeBounds）; // Write directions steps writeDirectionsSteps（updatedResponse.routes [0] .legs [0] .steps）; //偏移地图offsetMap（）; }）; }}）;} function writeDirectionsSteps（steps）{var overlayContent = document.getElementById（overlayContent）; overlayContent.innerHTML ='';对于（var i = 0; i

body {margin：0;填充：0; font-family：Arial;}＃map-canvas {height：450px; width：950px;}＃overlay {position：absolute;宽度：200px; height：450px;背景：黑色;不透明度：.8; top：0;左：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;}我{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覆盖< / h1> < h5>路线不应绘制在此元素下方。< / h5> < h5>点击< i> Calc路线< / i>按钮绘制路线路线。< / h5> < h5>< i>地图偏移< / i>将自动应用。< / h5> < h5>< i>拖曳路线< / i>看看它是如何应用的。< / h5> < h5>点击< i>偏移地图< / i>按钮重新应用偏移量。< / h5> < h5>按一下< i>只适合< / i>按钮仅适合路线边界。< / h5> < h5>按一下< i>适应和偏移地图< / i>按钮以适合路线边界并重新应用偏移。< / h5> < / div>< / div>< button id =calcRoute> Calc route< / button>< button id =offsetMap>> Offset map< / button>< button id = >仅适合< /按钮><按钮id =fitAndOffsetMap>适应和偏移地图< /按钮>< script src =http://maps.googleapis.com/maps/api/js?sensor= false& libraries = geometrytype =text / javascript>< / script>

How do you change the markers with custom markers active in the map in the directions panel and change the color aswell from the body? Any help much appreciated.

The screenshot:

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

解决方案

Just to keep alive @MrUpsidown comment and code alive:

Short answer: you can't. Longer answer: don't use the directions panel. Create your own, with the information you need (from the directions service response) and add your custom markers.

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>

这篇关于Google Maps API v3：如何更改Directions（set）面板中的默认航点标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！