javascript - 我可以更改谷歌地图中标记的默认AB吗？

Question

以下是 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>

Answer 1

我认为您无法更改它们，但您可以告诉 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});