изменить значок по умолчанию маркера по маршруту

Я хочу изменить значок по умолчанию маркера при поиске маршрута между двумя местоположениями. Как мне это сделать? Я использую этот код, но я не получил только карту без маршрута и точекизменить значок по умолчанию маркера по маршруту

var start = new google.maps.Marker({ 
position: new google.maps.LatLng(lat, lon), 
icon:'http://www.google.com/mapfiles/dd-start.png', 
map: map }); 

var end = new google.maps.Marker({ 
position: new google.maps.LatLng(lat1, long1), 
icon:'http://www.google.com/mapfiles/dd-end.png', 
map: map }); 
var request = { 
      origin: start, 
       destination: end, 
       optimizeWaypoints: true, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
      };

источник

2012-04-02 mobileDeveloper

ли теперь ясно ?? Я меняю вопрос. Я хочу изменить значок по умолчанию (маркер с буквой). Я хочу изменить этот значок с помощью «http://www.google.com/mapfiles/dd-start.png» в точке источника и для адресата, который я хочу поместить на эту страницу http://www.google.com/ mapfiles/dd-end.png – mobileDeveloper

Ага, вы имеете в виду, что вместо использования значков по умолчанию вы хотите использовать пользовательские значки. –

yes Я хочу использовать пользовательский значок маркера при поиске маршрута – mobileDeveloper

При создании визуализатора добавить эту опцию, а затем поместите маркера в начале координат (начало) и назначение (конец)

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

источник

2012-04-02 17:17:33

вот рабочий пример, измените в соответствии с вашими требованиями.

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Optimized Directions</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 
    var origin = null; 
    var destination = null; 
    var waypoints = []; 
    var markers = []; 
    var directionsVisible = false; 

    function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(37.7749295, -122.4194155); 
    var myOptions = { 
     zoom:13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: chicago 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById("directionsPanel")); 

    google.maps.event.addListener(map, 'click', function(event) { 
     if (origin == null) { 
     origin = event.latLng; 
     addMarker(origin); 
     } else if (destination == null) { 
     destination = event.latLng; 
     addMarker(destination); 
     } else { 
     if (waypoints.length < 9) { 
      waypoints.push({ location: destination, stopover: true }); 
      destination = event.latLng; 
      addMarker(destination); 
     } else { 
      alert("Maximum number of waypoints reached"); 
     } 
     } 
    }); 
    } 

    function addMarker(latlng) { 
    markers.push(new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png" 
    }));  
    } 

    function calcRoute() { 

    if (origin == null) { 
     alert("Click on the map to add a start point"); 
     return; 
    } 

    if (destination == null) { 
     alert("Click on the map to add an end point"); 
     return; 
    } 

    var mode = google.maps.DirectionsTravelMode.DRIVING; 

    var request = { 
     origin: origin, 
     destination: destination, 
     waypoints: waypoints, 
     travelMode: mode, 

    }; 

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

    clearMarkers(); 
    directionsVisible = true; 
    } 

    function clearMarkers() { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); 
    } 
    } 

    function clearWaypoints() { 
    markers = []; 
    origin = null; 
    destination = null; 
    waypoints = []; 
    directionsVisible = false; 
    } 

    function reset() { 
    clearMarkers(); 
    clearWaypoints(); 
    directionsDisplay.setMap(null); 
    directionsDisplay.setPanel(null); 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));  
    } 
</script> 
</head> 
<body onload="initialize()" style="font-family: sans-serif;"> 
    <table style="width: 400px"> 

    <tr> 
     <td><input type="button" value="Reset" onclick="reset()" /></td> 
    </tr> 
    <tr> 
     <td><input type="button" value="Get Directions!" onclick="calcRoute()" /></td> 
     <td></td> 
    </tr> 
    </table> 
    <div style="position:relative; border: 1px; width: 610px; height: 400px;"> 
    <div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div> 
    <div id="directionsPanel" style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div> 

    </div> 
</body> 
</html>

источник

2012-04-02 18:46:24

Этот пример не то, что мне нужно. Я хочу изменить изображение значка по умолчанию, когда я нажимаю кнопку «получить направление». Я получаю тот же значок, значок по умолчанию маркера по маршруту – mobileDeveloper

Хорошо, моя попытка:

Набор visible = false и draggable = true в DirectionsRendererOptions объекта
Создать DirectionsRenderer объект
Создание маркеров по своему усмотрению (с draggable=true опцией)

Pass dragstart и drag событие от вашей мамы RKer к Renderer маркеров (начало и конец)

google.maps.event.addListener(marker_start, 'dragstart', function(e) { 
    directionsRenderer.b.markers[0].setPosition(this.getPosition()); 
    google.maps.event.trigger(directionsRenderer.b.markers[0], 'dragstart', e); 
}); 

google.maps.event.addListener(marker_start, 'drag', function(e) { 
    directionsRenderer.b.markers[0].setPosition(this.getPosition()); 
    google.maps.event.trigger(directionsRenderer.b.markers[0], 'drag', e); 
}); 

google.maps.event.addListener(marker_end, 'dragstart', function(e) { 
    var l = directionsRenderer.b.markers.length - 1; 
    directionsRenderer.b.markers[l].setPosition(this.getPosition()); 
    google.maps.event.trigger(directionsRenderer.b.markers[l], 'dragstart', e); 
}); 

google.maps.event.addListener(marker_end, 'drag', function(e) { 
    var l = directionsRenderer.b.markers.length - 1; 
    directionsRenderer.b.markers[l].setPosition(this.getPosition()); 
    google.maps.event.trigger(directionsRenderer.b.markers[l], 'drag', e); 
});

источник

2012-04-12 19:20:15 hamczu

изменить значок по умолчанию маркера по маршруту

ответ

Смежные вопросы