Question

我正在使用谷歌地图v3。

我已经删除了标记，以便在地图上显示我自己的标记。

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

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

是否有其他方法可以修改源代码，还是需要滚动自己的路线渲染器？

Answer 1

我的方向输出中的标记也存在问题。如果没有一些非常繁琐的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 {
   font-weight: bold;
   padding: 10px 10px 10px 30px;
   background: white url(../images/map_icons/number_1.png) no-repeat left center;
}
.adp-placemark {
   font-weight: bold;
   padding: 10px 10px 10px 30px;
   background: white url(../images/map_icons/number_2.png) no-repeat left center;
}

Answer 2

我在访问标记“内部”方向渲染时遇到了问题，并且找不到任何对我来说足够好的解决方案......所以我自己制作并创建了一个JavaScript类。我希望它会有所帮助。

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

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

我的代码位于：http://jsfiddle.net/mzwjW/6/

修改：刚刚复制了整个 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();

Answer 3

是的！非常好用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来管理这个

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

3 个答案: