Question

在我为自行车旅行制作的地图页面上，我可以改变地图的风格并调整路线strokeColor，但仅限于我重建＆＃39;路线。

如果我对航点进行了一些手动更改，那么当我重建航线时，这些变化就会消失。

我尝试直接在样式中更改它（对于每个样式，不同的strokeColor如：[{elementType：＆＃39; polylineOptions＆＃39;，样式：[{strokeColor：＆＃34;＃e3e2e2＆＃34;} ]}）但我找不到正确的编码方式，我也不知道它是否可能。

代码提取：

var styleSelector = document.getElementById('style-selector2');
map.setOptions({styles: styles[styleSelector.value]});
// Apply new JSON when the user selects a different style.
styleSelector.addEventListener('change', function() {
    map.setOptions({styles: styles[styleSelector.value]});
    switch (styleSelector.value){
        case "dark1" :
        zelinecolor="#e21b25";
        break;
        case "dark2" :
        zelinecolor="#e21b25";
        break;
        case "grey" :
        zelinecolor="#e21b25";
        break;
        case "red" :
        zelinecolor="#80FF00";
        break;
        case "green" :
        zelinecolor="#e21b25";
        break;
        case "night" :
        zelinecolor="#FFCC00";
        break;
        case "default" :
        zelinecolor="#e21b25";
        break;
    }
    directionsDisplay.setOptions({polylineOptions:{strokeColor:zelinecolor},'draggable':true});
    //computeTotalDistance(directionsDisplay.getDirections());
    // calcRoute(); I REMOVE THAT BECAUSE ITS REBUILD THE ROUTE !
});

function calcRoute(){
   var DriveMode = document.getElementById('drive-mode').value;
   if (start !="" && end !=""){
       console.log("calcRoute on color :" + zelinecolor);
       directionsDisplay.setOptions({polylineOptions:
       {strokeColor:zelinecolor},'draggable':true});
       var request={origin:start,destination:end,travelMode: 
       google.maps.DirectionsTravelMode[DriveMode],avoidHighways: true,
       avoidTolls: true,};
       directionsService.route(request, function(response, status) {
       if(status==google.maps.DirectionsStatus.OK) {
           var zekils=(response.routes[0].legs[0].distance.value)*0.001;
           document.getElementById("div_dist").innerHTML="distance : " + 
           (zekils.toFixed(2))+" kms";
           directionsDisplay.setDirections(response);
           mnuH('exp');
       }
       });
   }
}

这里的完整代码： https://www.lacyclo.org/velo-voyage/include-maps/index.html

Answer 1

您需要切换DirectionsRenderer的map属性才能让它重新渲染。

directionsDisplay.setOptions({
  polylineOptions: {
    strokeColor: zelinecolor
  },
  draggable: true
});
directionsDisplay.setMap(null);
directionsDisplay.setMap(map);

proof of concept fiddle

代码段

var geocoder;
var map;
var start = "New York, NY";
var end = "Newark, NJ";
var directionsDisplay;
var directionsService;
var zelinecolor;
var styleSelector;

function initialize() {
  styleSelector = document.getElementById('style-selector2');
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  calcRoute();
  var styleSelector = document.getElementById('style-selector2');
  map.setOptions({
    styles: styles[styleSelector.value]
  });
  // Apply new JSON when the user selects a different style.
  styleSelector.addEventListener('change', function() {
    map.setOptions({
      styles: styles[styleSelector.value]
    });
    console.log(styleSelector.value);
    switch (styleSelector.value) {
      case "dark1":
        zelinecolor = "#e21b25";
        break;
      case "dark2":
        zelinecolor = "#e21b25";
        break;
      case "grey":
        zelinecolor = "#e21b25";
        break;
      case "red":
        zelinecolor = "#80FF00";
        break;
      case "green":
        zelinecolor = "#e21b25";
        break;
      case "night":
        zelinecolor = "#FFCC00";
        break;
      case "default":
        zelinecolor = "#e21b25";
        break;
    }
    directionsDisplay.setOptions({
      polylineOptions: {
        strokeColor: zelinecolor
      },
      draggable: true
    });
    console.log(zelinecolor);
    directionsDisplay.setMap(null);
    directionsDisplay.setMap(map);
    //computeTotalDistance(directionsDisplay.getDirections());
    // calcRoute(); I REMOVE THAT BECAUSE ITS REBUILD THE ROUTE !
  });
}
google.maps.event.addDomListener(window, "load", initialize);


function calcRoute() {
  var DriveMode = "DRIVING"; // document.getElementById('drive-mode').value;
  if (start != "" && end != "") {
    console.log("calcRoute on color :" + zelinecolor);
    directionsDisplay.setOptions({
      polylineOptions: {
        strokeColor: zelinecolor
      },
      'draggable': true
    });
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode[DriveMode],
      avoidHighways: true,
      avoidTolls: true,
    };
    directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        var zekils = (response.routes[0].legs[0].distance.value) * 0.001;
        document.getElementById("div_dist").innerHTML = "distance : " +
          (zekils.toFixed(2)) + " kms";
        directionsDisplay.setDirections(response);
        mnuH('exp');
      }
    });
  }
}
var styles = {
  default: null,
  dark1: [{
      elementType: 'geometry',
      stylers: [{
        color: "#000000"
      }]
    },
    {
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#746855'
      }]
    },
    {
      elementType: "labels.text.stroke",
      stylers: [{
        color: "#242f3e"
      }]
    },
    {
      featureType: "administrative.land_parcel",
      elementType: "labels",
      stylers: [{
        "visibility": "on"
      }]
    },
    {
      featureType: "administrative.locality",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#d59563"
      }]
    },
    {
      featureType: "landscape.natural.landcover",
      stylers: [{
        "color": "#808080"
      }]
    },
    {
      featureType: "poi",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#d59563"
      }]
    },
    {
      featureType: "poi.park",
      elementType: "geometry",
      stylers: [{
        "color": "#263c3f"
      }]
    },
    {
      featureType: "poi.park",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#6b9a76"
      }]
    },
    {
      featureType: "road",
      elementType: "geometry",
      stylers: [{
        "color": "#38414e"
      }]
    },
    {
      featureType: "road",
      elementType: "geometry.stroke",
      stylers: [{
        "color": "#212a37"
      }]
    },
    {
      featureType: "road",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#9ca5b3"
      }]
    },
    {
      featureType: "road.arterial",
      elementType: "geometry.fill",
      stylers: [{
        "color": "#80ff00"
      }]
    },
    {
      featureType: "road.arterial",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#80ff00"
      }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry",
      stylers: [{
        "color": "#746855"
      }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry.fill",
      stylers: [{
        "color": "#ffff75"
      }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry.stroke",
      stylers: [{
        "color": "#1f2835"
      }, {
        "visibility": "on"
      }]
    },
    {
      featureType: "road.highway",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#f3d19c"
      }]
    },
    {
      featureType: "road.local",
      stylers: [{
        "color": "#c0c0c0"
      }, {
        "weight": 1
      }]
    },
    {
      featureType: "road.local",
      elementType: "geometry.fill",
      stylers: [{
        "color": "#c0c0c0"
      }, {
        "visibility": "on"
      }, {
        "weight": 2
      }]
    },
    {
      featureType: "road.local",
      elementType: "labels",
      stylers: [{
        "visibility": "on"
      }]
    },
    {
      featureType: "road.local",
      elementType: "labels.text",
      stylers: [{
        "visibility": "on"
      }]
    },
    {
      featureType: "road.local",
      elementType: "labels.text.fill",
      stylers: [{
        "visibility": "off"
      }]
    },
    {
      featureType: "transit",
      elementType: "geometry",
      stylers: [{
        "color": "#2f3948"
      }]
    },
    {
      featureType: "transit.station",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#d59563"
      }]
    },
    {
      featureType: "water",
      elementType: "geometry",
      stylers: [{
        "color": "#345587"
      }]
    },
    {
      featureType: "water",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#515c6d"
      }]
    },
    {
      featureType: "water",
      elementType: "labels.text.stroke",
      stylers: [{
        "color": "#17263c"
      }]
    }
  ],
  dark2: [{
      elementType: 'geometry',
      stylers: [{
        color: "#000000"
      }]
    },
    {
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#746855'
      }]
    },
    {
      elementType: "labels.text.stroke",
      stylers: [{
        color: "#242f3e"
      }]
    },
    {
      featureType: "administrative.land_parcel",
      elementType: "labels",
      stylers: [{
        "visibility": "on"
      }]
    },
    {
      featureType: "administrative.locality",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#d59563"
      }]
    },
    {
      featureType: "landscape.natural.landcover",
      stylers: [{
        "color": "#808080"
      }]
    },
    {
      featureType: "poi",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#d59563"
      }]
    },
    {
      featureType: "poi.park",
      elementType: "geometry",
      stylers: [{
        "color": "#263c3f"
      }]
    },
    {
      featureType: "poi.park",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#6b9a76"
      }]
    },
    {
      featureType: "road",
      elementType: "geometry",
      stylers: [{
        "color": "#38414e"
      }]
    },
    {
      featureType: "road",
      elementType: "geometry.stroke",
      stylers: [{
        "color": "#212a37"
      }]
    },
    {
      featureType: "road",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#9ca5b3"
      }]
    },
    {
      featureType: "road.arterial",
      elementType: "geometry.fill",
      stylers: [{
        "color": "#80ff00"
      }, {
        "weight": 3
      }]
    },
    {
      featureType: "road.arterial",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#80ff00"
      }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry",
      stylers: [{
        "color": "#746855"
      }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry.fill",
      stylers: [{
        "color": "#ffff75"
      }, {
        "weight": 5
      }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry.stroke",
      stylers: [{
        "color": "#1f2835"
      }, {
        "visibility": "on"
      }]
    },
    {
      featureType: "road.highway",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#f3d19c"
      }]
    },
    {
      featureType: "road.local",
      stylers: [{
        "color": "#c0c0c0"
      }, {
        "weight": 1
      }]
    },
    {
      featureType: "road.local",
      elementType: "geometry.fill",
      stylers: [{
        "color": "#c0c0c0"
      }, {
        "visibility": "on"
      }, {
        "weight": 1
      }]
    },
    {
      featureType: "road.local",
      elementType: "labels",
      stylers: [{
        "visibility": "on"
      }]
    },
    {
      featureType: "road.local",
      elementType: "labels.text",
      stylers: [{
        "visibility": "on"
      }]
    },
    {
      featureType: "road.local",
      elementType: "labels.text.fill",
      stylers: [{
        "visibility": "off"
      }]
    },
    {
      featureType: "transit",
      elementType: "geometry",
      stylers: [{
        "color": "#2f3948"
      }]
    },
    {
      featureType: "transit.station",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#d59563"
      }]
    },
    {
      featureType: "water",
      elementType: "geometry",
      stylers: [{
        "color": "#345587"
      }]
    },
    {
      featureType: "water",
      elementType: "labels.text.fill",
      stylers: [{
        "color": "#515c6d"
      }]
    },
    {
      featureType: "water",
      elementType: "labels.text.stroke",
      stylers: [{
        "color": "#17263c"
      }]
    },
    {
      featureType: "all",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }
  ],
  night: [{
      elementType: 'geometry',
      stylers: [{
        color: '#242f3e'
      }]
    },
    {
      elementType: 'labels.text.stroke',
      stylers: [{
        color: '#242f3e'
      }]
    },
    {
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#746855'
      }]
    },
    {
      featureType: 'administrative.locality',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#d59563'
      }]
    },
    {
      featureType: 'poi',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#d59563'
      }]
    },
    {
      featureType: 'poi.park',
      elementType: 'geometry',
      stylers: [{
        color: '#263c3f'
      }]
    },
    {
      featureType: 'poi.park',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#6b9a76'
      }]
    },
    {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [{
        color: '#38414e'
      }]
    },
    {
      featureType: 'road',
      elementType: 'geometry.stroke',
      stylers: [{
        color: '#212a37'
      }]
    },
    {
      featureType: 'road',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#9ca5b3'
      }]
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry',
      stylers: [{
        color: '#746855'
      }]
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry.stroke',
      stylers: [{
        color: '#1f2835'
      }]
    },
    {
      featureType: 'road.highway',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#f3d19c'
      }]
    },
    {
      featureType: 'transit',
      elementType: 'geometry',
      stylers: [{
        color: '#2f3948'
      }]
    },
    {
      featureType: 'transit.station',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#d59563'
      }]
    },
    {
      featureType: 'water',
      elementType: 'geometry',
      stylers: [{
        color: '#17263c'
      }]
    },
    {
      featureType: 'water',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#515c6d'
      }]
    },
    {
      featureType: 'water',
      elementType: 'labels.text.stroke',
      stylers: [{
        color: '#17263c'
      }]
    }
  ],
  red: [{
    "featureType": "all",
    "elementType": "all",
    "stylers": [{
      "hue": "#ff0000"
    }, {
      "saturation": -100
    }, {
      "lightness": -30
    }]
  }, {
    "featureType": "all",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#ffffff"
    }]
  }, {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "color": "#353535"
    }]
  }, {
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [{
      "color": "#656565"
    }]
  }, {
    "featureType": "poi",
    "elementType": "geometry.fill",
    "stylers": [{
      "color": "#505050"
    }]
  }, {
    "featureType": "poi",
    "elementType": "geometry.stroke",
    "stylers": [{
      "color": "#808080"
    }]
  }, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{
      "color": "#FF2121"
    }]
  }, {
    "featureType": "transit",
    "elementType": "labels",
    "stylers": [{
      "hue": "#000000"
    }, {
      "saturation": 100
    }, {
      "lightness": -40
    }, {
      "invert_lightness": true
    }, {
      "gamma": 1.5
    }]
  }],
  grey: [{
    "featureType": "all",
    "elementType": "all",
    "stylers": [{
      "hue": "#ff0000"
    }, {
      "saturation": -100
    }, {
      "lightness": -30
    }]
  }, {
    "featureType": "all",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#ffffff"
    }]
  }, {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "color": "#353535"
    }]
  }, {
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [{
      "color": "#656565"
    }]
  }, {
    "featureType": "poi",
    "elementType": "geometry.fill",
    "stylers": [{
      "color": "#505050"
    }]
  }, {
    "featureType": "poi",
    "elementType": "geometry.stroke",
    "stylers": [{
      "color": "#808080"
    }]
  }, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{
      "color": "#454545"
    }]
  }, {
    "featureType": "transit",
    "elementType": "labels",
    "stylers": [{
      "hue": "#000000"
    }, {
      "saturation": 100
    }, {
      "lightness": -40
    }, {
      "invert_lightness": true
    }, {
      "gamma": 1.5
    }]
  }],
  green: [{
    "featureType": "all",
    "elementType": "all",
    "stylers": [{
      "hue": "#ff0000"
    }, {
      "saturation": -100
    }, {
      "lightness": -30
    }]
  }, {
    "featureType": "all",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#ffffff"
    }]
  }, {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "color": "#353535"
    }]
  }, {
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [{
      "color": "#656565"
    }]
  }, {
    "featureType": "poi",
    "elementType": "geometry.fill",
    "stylers": [{
      "color": "#505050"
    }]
  }, {
    "featureType": "poi",
    "elementType": "geometry.stroke",
    "stylers": [{
      "color": "#808080"
    }]
  }, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{
      "color": "#80FF00"
    }]
  }, {
    "featureType": "transit",
    "elementType": "labels",
    "stylers": [{
      "hue": "#000000"
    }, {
      "saturation": 100
    }, {
      "lightness": -40
    }, {
      "invert_lightness": true
    }, {
      "gamma": 1.5
    }]
  }],
};

function mnuH(mode) {
  console.log("func mnuH");
  switch (mode) {
    case 'x':
      if (document.getElementById("div_mnumap").style.width == 230 + "px") {
        document.getElementById("div_mnumap").style.width = 500 + "px";
        document.getElementById("div_dist").style.display = "block";
        document.getElementById("btnH").src = "/velo-voyage/icones/arrow-left.png";
      } else {
        document.getElementById("div_mnumap").style.width = 230 + "px";
        document.getElementById("div_mnumap").style.height = 29 + "px";
        document.getElementById("div_trak").style.display = "none";
        document.getElementById("div_dist").style.display = "none";
        document.getElementById("elevation_chart").style.display = "none";
        document.getElementById("btnH").src = "/velo-voyage/icones/arrow-right.png";
        document.getElementById("btnV").src = "/velo-voyage/icones/arrow-down.png";
      }
      break;
    case 'hide':
      document.getElementById("div_mnumap").style.width = 230 + "px";
      document.getElementById("div_trak").style.display = "none";
      document.getElementById("div_dist").style.display = "none";
      document.getElementById("btnH").src = "/velo-voyage/icones/arrow-right.png";
      break;
    case 'exp':
      document.getElementById("div_mnumap").style.width = 500 + "px";
      document.getElementById("div_dist").style.display = "block";
      document.getElementById("btnH").src = "/velo-voyage/icones/arrow-left.png";
      break;
  }
}

html,
body,
#map_canvas {
  height: 90%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="div_dist"></div>
<div id="style-selector-control2" class="map-control">
  <select id="style-selector2" class="selector-control"><br>
<option disabled selected>Style :</option>
<option value="dark1">Black & Green</option>
<option value="dark2">BG no labels</option>
<option value="grey">Grey & Grey</option>
<option value="red">Grey & Red</option>
 <option value="green">Grey & Green</option>
<option value="night">Blu Night</option>
 <option value="default">Classic</option>
</select>
</div>
<div id="style-selector-control2" class="map-control2">
  <select id="drive-mode" class="selector-control">
<option value="Mode" disabled selected>Mode :</option>
<option value="WALKING">Marche</option>
<option value="BICYCLING">Vélo-ve</option>
<option value="TRANSIT">Transports</option>
<option value="DRIVING">Ouah-ture</option>
</select>
</div>

<div id="div_mnumap"></div>
<img id="btnH" />
<div id="map_canvas"></div>

更改strokeColor显示gmap路线后？

1 个答案: