Dom Google Maps v3-在DirectionsRenderer中隐藏/修改地图标记

我正在使用谷歌地图v3

我已经抑制了标记，以便在地图上显示我自己的标记

我想修改方向div中显示的图像，但是图像没有ID或类

<img jsvalues=".src:markerIconPaths[$waypointIndex]" jstcache="13" src="http://maps.gstatic.com/intl/en_us/mapfiles/icon_greenA.png">

---

是否有其他方法修改源代码，或者是否需要滚动我自己的方向渲染器？

我还遇到了方向输出中的标记问题。如果没有一些非常麻烦的js，就无法替换标记，而js必须包括针对转弯方向等的变通方法

一种简单的方法是使用css：

A行是一个表：

<table id="adp-placemark" class="adp-placemark" jstcache="0">
and B line is:

<table class="adp-placemark" jstcache="0">

对!！ 非常好用css

#adp-placemark img,.adp-placemark img{display:none}
#adp-placemark{height:31px;background:#fff url(../img/marker_start.png) no-repeat left center}
#adp-placemark .adp-text,.adp-placemark .adp-text{height:31px;font-weight: bold;padding-left:29px}
.adp-placemark{background:#fff url(../img/marker_end.png) no-repeat left center}

带有marker_start.png和marker_end.png 19px*31px

我不知道谷歌地图api v3中没有解决方案

---

你也可以用jQuery管理这个问题，我在访问标记“内部”方向渲染时也遇到了问题，没有找到对我来说足够好的解决方案。。。所以我自己做了，创建了一个小小的JavaScript类。我希望这会有帮助

它只使用API记录的方法和属性

我期待任何评论和代码的改进

我的密码是：

编辑：刚刚在此处复制了整个JavaScript代码

var map;
var custom; 

var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(52.87916, 18.32910),
    mapTypeId: 'terrain'
};
var markers = [];

$(function() {
  map = new google.maps.Map($('#map')[0], myOptions);
  custom = new customDirectionsRenderer(new google.maps.LatLng(50.87916, 16.32910), new google.maps.LatLng(52.87916, 16.32910), map);

    //you have access to marker :)
    custom.startMarker.setTitle('POLAND!!');
});

function customDirectionsRenderer(startPoint, endPoint, map) {
    //!!!!! reference to our class
    var that = this;

    this.directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: true,
        suppressMarkers: true,
        map: map
    });

    google.maps.event.addListener(this.directionsDisplay, 'directions_changed', function () {
        checkWaypoints();
    });

    this.directionsService = new google.maps.DirectionsService();

    var draggedMarker;
    var waypointsMarkers = new Array();
    this.map = map;
    this.polyline = '';
    this.polylinePoints = [];

    //<-- create Start and Stop Markers
    this.startMarker = new google.maps.Marker({
        position: startPoint,
        title: 'Start',
        map: map,
        draggable: true,
        optimized: false
    });

    this.endMarker = new google.maps.Marker({
        position: endPoint,
        title: 'End',
        map: map,
        draggable: true,
        optimized: false
    });
    //-->

    //<-- add events listeners to Start/Stop Markers
    google.maps.event.addListener(this.startMarker, 'dragend', dragEnd);
    google.maps.event.addListener(this.startMarker, 'dragstart', dragStart);
    google.maps.event.addListener(this.startMarker, 'drag', drag);
    google.maps.event.addListener(this.endMarker, 'dragend', dragEnd);
    google.maps.event.addListener(this.endMarker, 'dragstart', dragStart);
    google.maps.event.addListener(this.endMarker, 'drag', drag);
    //-->

    //<-- update directionsRenderer true - snap markers to nearest streets
    update(true);
    //-->

    //<--privates
    ////<-- event handlers
    function dragStart() {
        draggedMarker = this;
    }

    function dragEnd() {
        clearTimeout(this.timeout);
        update(true);
    }

    function drag() {
        if (this.timeout !== undefined) {
            return;
        }
        this.timeout = setTimeout(function () { update(false); }, 200);
    }
    ////-->

    ////<-- create draggable markers for Waypoints from given array of latlng objects
    function createWaypointsMarkers(wpoints) {
        $.each(waypointsMarkers, function (idx, obj) {
            obj.setMap(null);
        });
        waypointsMarkers = [];

        $.each(wpoints, function (idx, obj) {
            var marker = new google.maps.Marker({
                position: obj,
                map: that.map,
                draggable: true,
                optimized: false,
                title: idx.toString()
            });
            waypointsMarkers.push(marker);

            google.maps.event.addListener(marker, 'dragend', dragEnd);
            google.maps.event.addListener(marker, 'dragstart', dragStart);
            google.maps.event.addListener(marker, 'drag', drag);
        });
    }
    ////-->

    ////-->  check if new waypoint was created
    function checkWaypoints() {
        if (that.directionsDisplay.getDirections() !== undefined) {
            if (waypointsMarkers.length !=
                that.directionsDisplay.getDirections().routes[0].legs[0].via_waypoints.length) {
                createWaypointsMarkers(that.directionsDisplay.getDirections().routes[0].legs[0].via_waypoints);
            }
        }
    }
    ////-->

    ////--> Update directionsRenderer when move or drop marker 
    ////bool setMarkersPositions - snap markers to nearest streets?
    function update(setMarkersPositions) {
        if (draggedMarker !== undefined) {
            draggedMarker.timeout = undefined;
        }
        that.directionsDisplay.preserveViewport = true;

        checkWaypoints();

        var waypoints = [];
        $.each(waypointsMarkers, function (idx, obj) {
            waypoints.push({ location: obj.getPosition(), stopover: false });
        });

        var request = {
            origin: that.startMarker.getPosition(),
            destination: that.endMarker.getPosition(),
            waypoints: waypoints,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        that.directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                that.directionsDisplay.setDirections(response);

                if (waypointsMarkers.length != response.routes[0].legs[0].via_waypoints.length) {
                    createWaypointsMarkers(response.routes[0].legs[0].via_waypoints);
                }

                if (setMarkersPositions) {
                    that.startMarker.setPosition(response.routes[0].legs[0].start_location);
                    that.endMarker.setPosition(response.routes[0].legs[0].end_location);
                    $.each(response.routes[0].legs[0].via_waypoints, function (idx, obj) {
                        waypointsMarkers[idx].setPosition(obj);
                    });
                    that.polyline = response.routes[0].overview_polyline.points;
                    that.polylinePoints = response.routes[0].overview_path;
                }
            }
        });
    }
    ////-->
    //-->
}
customDirectionsRenderer.prototype = new google.maps.MVCObject();

var映射；
var习惯；
变量myOptions={
缩放：6，
中心：新google.maps.LatLng（52.8791618.32910），
mapTypeId:'地形'
};
var标记=[]；
$（函数（）{
map=new google.maps.map（$（'#map'）[0]，myOptions）；
custom=新的customDirectionsRenderer（新的google.maps.LatLng（50.87916,16.32910），新的google.maps.LatLng（52.87916,16.32910），map）；
//您有权访问标记：）
custom.startMarker.setTitle（'POLAND！！'）；
});
函数customDirectionsRenderer（起点、终点、地图）{
//！！！！！！！参考我们班
var=这个；
this.directionsDisplay=new google.maps.directionsdrenderer({
真的，
对,，
地图：地图
});
google.maps.event.addListener（this.directionsDisplay，'directions\u changed'，函数（）{
检查航路点（）；
});
this.directionsService=新的google.maps.directionsService（）；
var draggedMarker；
var waypointsMarkers=新数组（）；
this.map=map；
这个。多段线=“”；
此.polylinePoints=[]；
//
//
//
//检查是否创建了新航路点
功能检查航路点（）{
if（that.directionsDisplay.getDirections（）！==未定义）{
如果（航路点标记.长度=
.directionsDisplay.getDirections（）.routes[0]。legs[0]。via_waypoints.length）{
createWaypointsMarkers（即.directionsDisplay.getDirections（）.routes[0].legs[0].via_waypoints）；
}
}
}
////-->
////-->移动或放置标记时更新directionsRenderer
////布尔设置标记位置-将标记捕捉到最近的街道？
功能更新（设置标记位置）{
如果（draggedMarker！==未定义）{
draggedMarker.timeout=未定义；
}
that.directionsDisplay.preserveViewport=true；
检查航路点（）；
var航路点=[]；
$。每个（航路点标记器、功能（idx、obj）{
push（{location:obj.getPosition（），stopover:false}）；
});
var请求={
原点：that.startMarker.getPosition（），
目标：that.endMarker.getPosition（），
航路点：航路点，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
即.directionsDisplay.setDirections（响应）；
if（waypointsMarkers.length！=响应.routes[0]。支腿[0]。via_waypoints.length）{
createWaypointsMarkers（response.routes[0]。legs[0]。via_waypoints）；
}
if（设置标记位置）{
that.startMarker.setPosition（response.routes[0].legs[0].start\u location）；
.endMarker.setPosition（response.routes[0].legs[0].end_location）；
$.each（response.routes[0]。支腿[0]。通过航路点，功能（idx，obj）{
航路点标记器[idx]。设置位置（obj）；
});
that.polyline=response.routes[0].overview\u polyline.points；
that.polylinePoints=response.routes[0]。概述\u路径；
}
}
});
}
////-->
//-->
}
customDirectionsRenderer.prototype=新的google.maps.MVCObject（）；

​

var map;
var custom; 

var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(52.87916, 18.32910),
    mapTypeId: 'terrain'
};
var markers = [];

$(function() {
  map = new google.maps.Map($('#map')[0], myOptions);
  custom = new customDirectionsRenderer(new google.maps.LatLng(50.87916, 16.32910), new google.maps.LatLng(52.87916, 16.32910), map);

    //you have access to marker :)
    custom.startMarker.setTitle('POLAND!!');
});

function customDirectionsRenderer(startPoint, endPoint, map) {
    //!!!!! reference to our class
    var that = this;

    this.directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: true,
        suppressMarkers: true,
        map: map
    });

    google.maps.event.addListener(this.directionsDisplay, 'directions_changed', function () {
        checkWaypoints();
    });

    this.directionsService = new google.maps.DirectionsService();

    var draggedMarker;
    var waypointsMarkers = new Array();
    this.map = map;
    this.polyline = '';
    this.polylinePoints = [];

    //<-- create Start and Stop Markers
    this.startMarker = new google.maps.Marker({
        position: startPoint,
        title: 'Start',
        map: map,
        draggable: true,
        optimized: false
    });

    this.endMarker = new google.maps.Marker({
        position: endPoint,
        title: 'End',
        map: map,
        draggable: true,
        optimized: false
    });
    //-->

    //<-- add events listeners to Start/Stop Markers
    google.maps.event.addListener(this.startMarker, 'dragend', dragEnd);
    google.maps.event.addListener(this.startMarker, 'dragstart', dragStart);
    google.maps.event.addListener(this.startMarker, 'drag', drag);
    google.maps.event.addListener(this.endMarker, 'dragend', dragEnd);
    google.maps.event.addListener(this.endMarker, 'dragstart', dragStart);
    google.maps.event.addListener(this.endMarker, 'drag', drag);
    //-->

    //<-- update directionsRenderer true - snap markers to nearest streets
    update(true);
    //-->

    //<--privates
    ////<-- event handlers
    function dragStart() {
        draggedMarker = this;
    }

    function dragEnd() {
        clearTimeout(this.timeout);
        update(true);
    }

    function drag() {
        if (this.timeout !== undefined) {
            return;
        }
        this.timeout = setTimeout(function () { update(false); }, 200);
    }
    ////-->

    ////<-- create draggable markers for Waypoints from given array of latlng objects
    function createWaypointsMarkers(wpoints) {
        $.each(waypointsMarkers, function (idx, obj) {
            obj.setMap(null);
        });
        waypointsMarkers = [];

        $.each(wpoints, function (idx, obj) {
            var marker = new google.maps.Marker({
                position: obj,
                map: that.map,
                draggable: true,
                optimized: false,
                title: idx.toString()
            });
            waypointsMarkers.push(marker);

            google.maps.event.addListener(marker, 'dragend', dragEnd);
            google.maps.event.addListener(marker, 'dragstart', dragStart);
            google.maps.event.addListener(marker, 'drag', drag);
        });
    }
    ////-->

    ////-->  check if new waypoint was created
    function checkWaypoints() {
        if (that.directionsDisplay.getDirections() !== undefined) {
            if (waypointsMarkers.length !=
                that.directionsDisplay.getDirections().routes[0].legs[0].via_waypoints.length) {
                createWaypointsMarkers(that.directionsDisplay.getDirections().routes[0].legs[0].via_waypoints);
            }
        }
    }
    ////-->

    ////--> Update directionsRenderer when move or drop marker 
    ////bool setMarkersPositions - snap markers to nearest streets?
    function update(setMarkersPositions) {
        if (draggedMarker !== undefined) {
            draggedMarker.timeout = undefined;
        }
        that.directionsDisplay.preserveViewport = true;

        checkWaypoints();

        var waypoints = [];
        $.each(waypointsMarkers, function (idx, obj) {
            waypoints.push({ location: obj.getPosition(), stopover: false });
        });

        var request = {
            origin: that.startMarker.getPosition(),
            destination: that.endMarker.getPosition(),
            waypoints: waypoints,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        that.directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                that.directionsDisplay.setDirections(response);

                if (waypointsMarkers.length != response.routes[0].legs[0].via_waypoints.length) {
                    createWaypointsMarkers(response.routes[0].legs[0].via_waypoints);
                }

                if (setMarkersPositions) {
                    that.startMarker.setPosition(response.routes[0].legs[0].start_location);
                    that.endMarker.setPosition(response.routes[0].legs[0].end_location);
                    $.each(response.routes[0].legs[0].via_waypoints, function (idx, obj) {
                        waypointsMarkers[idx].setPosition(obj);
                    });
                    that.polyline = response.routes[0].overview_polyline.points;
                    that.polylinePoints = response.routes[0].overview_path;
                }
            }
        });
    }
    ////-->
    //-->
}
customDirectionsRenderer.prototype = new google.maps.MVCObject();