Standard-Symbol der Markierung in Route ändern

Ich möchte das Standard-Icon von Marker ändern, wenn ich Route zwischen zwei Orten suche. Wie kann ich es tun? Ich benutze diesen Code aber ich habe nicht nur die Karte ohne Route erhalten und weiseStandard-Symbol der Markierung in Route ändern

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 
      };

Quelle

2012-04-02 mobileDeveloper

Ist es jetzt klar ?? Ich ändere meine Frage. Ich möchte das Standardsymbol ändern (Markierung mit Buchstaben). Ich möchte dieses Symbol mit "http://www.google.com/mapfiles/dd-start.png" an der Quelle und am Ziel ändern, dem dieses Bild hinzugefügt werden soll http://www.google.com/ mapfiles/dd-end.png – mobileDeveloper

Aha, Sie meinen, dass Sie anstelle der Standardsymbole benutzerdefinierte Symbole verwenden möchten. –

Ja Ich möchte das benutzerdefinierte Symbol der Markierung verwenden, wenn ich die Route suche – mobileDeveloper

Wenn Sie die Renderer hinzufügen diese Option zu erstellen, dann platzieren Sie Ihre Markierungen am Ursprung (Start) und Ziel (Ende)

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

Quelle

2012-04-02 17:17:33

Hier ist das Arbeitsbeispiel, ändern Sie entsprechend Ihrer Anforderung.

<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>

Quelle

2012-04-02 18:46:24

Dieses Beispiel ist nicht das, was ich brauche. Ich möchte das Bild des Standardsymbols ändern, wenn ich auf die Schaltfläche "Richtung abrufen" klicke. Ich erhalte das gleiche Symbol, das Standardsymbol des Markers in der Route – mobileDeveloper

Ok, mein Versuch:

Set visible = false und draggable = true in DirectionsRendererOptions Objekt
erstellen DirectionsRenderer Objekt
Selbst designen Markierungen auf (mit draggable=true Option)

Pass dragstart und drag Ereignis von Ihrem ma rker Renderer Marker (Anfang und Ende)

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); 
});

Quelle

2012-04-12 19:20:15 hamczu

Standard-Symbol der Markierung in Route ändern

Antwort

Verwandte Themen