以下是 JavaScript 代码。我找不到在哪里更改 A B C 的默认行为。您可以引用一些示例链接吗？我用谷歌搜索并尝试过，但找不到有利的输出。我也检查了这个问题，但找不到结果。 change default icon of marker in route
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var combinedResults;
var directionsResultsReturned = 0;
function gDirRequest(service, waypoints, userFunction, waypointIndex, path) {
// set defaults
waypointIndex = typeof waypointIndex !== 'undefined' ? waypointIndex : 0;
path = typeof path !== 'undefined' ? path : [];
// get next set of waypoints
var s = gDirGetNextSet(waypoints, waypointIndex);
// build request object
var startl = s[0].shift()["location"];
var endl = s[0].pop()["location"];
var request = {
origin: startl,
destination: endl,
waypoints: s[0],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
optimizeWaypoints: false,
provideRouteAlternatives: false,
avoidHighways: false,
avoidTolls: false
};
service.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log(status);
if (directionsResultsReturned == 0) { // first bunch of results in. new up the combinedResults object
combinedResults = result;
directionsResultsReturned++;
}
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(result.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(result.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(result.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(result.routes[0].bounds.getSouthWest());
directionsResultsReturned++;
}
path = path.concat(result.routes[0].overview_path);
if (s[1] != null) {
gDirRequest(service, waypoints, userFunction, s[1], path)
} else {
//console.log(result);
//response.routes[0].overview_path=path;
directionsDisplay.setDirections(combinedResults);
//userFunction(path);
}
} else {
console.log(status);
}
});
}
function gDirGetNextSet (waypoints, startIndex) {
var MAX_WAYPOINTS_PER_REQUEST = 8;
var w = []; // array of waypoints to return
if (startIndex > waypoints.length - 1) { return [w, null]; } // no more waypoints to process
var endIndex = startIndex + MAX_WAYPOINTS_PER_REQUEST;
// adjust waypoints, because Google allows us to include the start and destination latlongs for free!
endIndex += 2;
if (endIndex > waypoints.length - 1) { endIndex = waypoints.length ; }
// get the latlongs
for (var i = startIndex; i < endIndex; i++) {
w.push(waypoints[i]);
}
if (endIndex != waypoints.length) {
return [w, endIndex -= 1];
} else {
return [w, null];
}
}
var driver_complete_sites = <?php echo json_encode($driver_complete_sites); ?>;
var driver_incomplete_sites = <?php echo json_encode($driver_incomplete_sites); ?>;
var driverLat = '<?php echo $driver_last_lat; ?>';
var driverLng = '<?php echo $driver_last_lng; ?>';
complete_icon = '<?php echo $this -> config -> base_url();?>images/tick.png';
incomplete_icon ='<?php echo $this -> config -> base_url();?>images/marker.png';
driver_pos_icon ='<?php echo $this -> config -> base_url();?>images/car_marker.png';
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var centerLng = 0;
var centerLat = 0;
if (driver_incomplete_sites != null){
if (driver_incomplete_sites.length>0){
//centerLat = driver_incomplete_sites[0].Latitude;
//centerLng= driver_incomplete_sites[0].Longitude;
centerLng = -81.7170
centerLat = 27.8333
}
}
if (driver_complete_sites != null){
if (driver_complete_sites.length>0){
length = driver_complete_sites.length - 1;
//centerLat = driver_complete_sites[0].Latitude;
//centerLng= driver_complete_sites[0].Longitude;
centerLng = -81.7170
centerLat = 27.8333
//driverLat = driver_complete_sites[length].Latitude;
//driverLng= driver_complete_sites[length].Longitude;
}
}
if (centerLng == 0 && centerLat == 0){
centerLng = -81.7170
centerLat = 27.8333
}
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(centerLat, centerLng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var infowindow = new google.maps.InfoWindow();
var waypoints = [];
var end = null;
var marker, i;
if (driver_complete_sites != null){
if (driver_complete_sites.length>0){
var skip=driver_complete_sites.length - 1;
var travelWaypoints=[];
for (var key in driver_complete_sites) {
latlngbounds.extend(new google.maps.LatLng(driver_complete_sites[key].Latitude,driver_complete_sites[key].Longitude));
var directionsService = new google.maps.DirectionsService();
if (key == skip){
travelWaypoints.push({location: new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude)});
end = new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude);
break;
}
else{
travelWaypoints.push({location: new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude)});
}
/*if (key == 0){
start = new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude);
}else if (key == skip){
end = new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude);
}else{
var address = new google.maps.LatLng(driver_complete_sites[key].Latitude, driver_complete_sites[key].Longitude);
if (address !== "") {
waypoints.push({
location: address,
//title: driver_complete_sites[key].Latitude+","+driver_complete_sites[key].Longitude,
//icon: complete_icon,
stopover: true
});
}
}*/
}
if (end != null){
gDirRequest(directionsService, travelWaypoints, function drawGDirLine(path) {
//directionsDisplay.setDirections(path);
//var line = new google.maps.Polyline({clickable:false,map:map,path:path});
});
}else{
marker = new google.maps.Marker({
position: new google.maps.LatLng(driver_complete_sites[0].Latitude, driver_complete_sites[0].Longitude),
map: map,
title: driver_complete_sites[0].Latitude+","+driver_complete_sites[0].Longitude,
icon: complete_icon
});
}
latlngbounds.extend(new google.maps.LatLng(driverLat,driverLng));
marker = new google.maps.Marker({
position: new google.maps.LatLng(driverLat, driverLng),
map: map,
title: driverLat+","+driverLng,
icon: driver_pos_icon
});
}
}
if (driver_incomplete_sites != null){
if (driver_incomplete_sites.length>0){
for (var key in driver_incomplete_sites) {
latlngbounds.extend(new google.maps.LatLng(driver_incomplete_sites[key].Latitude,driver_incomplete_sites[key].Longitude));
//alert(driver_incomplete_sites[key].Longitude)
marker = new google.maps.Marker({
position: new google.maps.LatLng(driver_incomplete_sites[key].Latitude, driver_incomplete_sites[key].Longitude),
map: map,
title: driver_incomplete_sites[key].Latitude +","+ driver_incomplete_sites[key].Longitude,
icon: incomplete_icon
});
}
}
}
if (driver_incomplete_sites.length>0 || driver_complete_sites.length > 0){
map.fitBounds(latlngbounds);
}
</script>
最佳答案
我认为您无法更改它们，但您可以告诉 API 不要绘制它们，然后自己用不同的图标绘制它们。
设置 DirectionsRenderer 时，必须将 suppressMarkers 设置为 true:
var directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true });
然后您可以绘制新标记:
var startMarker = new google.maps.Marker({icon: aIcon, map: map, position: startl});
var stopMarker = new google.maps.Marker({icon: bIcon, map: map, position: endl});
关于javascript - 我可以更改谷歌地图中标记的默认AB吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29939855/