您可以更改 googlemaps Api 路线的颜色和图钉吗？

Question

是否可以更改旅行线的颜色？并可能删除标记以便我可以添加自己的标记？

Current

Desired

我知道 google 文档中有一系列样式更改，但所有这些都会直接影响地图，我找不到任何可以应用于 route/route-markers 的内容 https://developers.google.com/maps/documentation/javascript/examples/style-array#maps_style_array-javascript

下面是我的代码，如果有帮助的话，注意我删除了我的 API 键：

html代码：

<html>
<head>
    <style>
        #map{height:100%;
        width:100%;
        }
    </style>
    <title>Directions Service</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="script5.js"></script>
</head>


<body>
    <div id='map'></div>
    <script src='script6.js'></script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=I-REMOVED-MY-KEY&callback=initMap">
    </script>

</body>
</html>

javascript:

function initMap() {
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 7,
      center: {lat: 52.896874,lng:-1.431861},
      
    });
    
    directionsRenderer.setMap(map);
  
calculateAndDisplayRoute(directionsService, directionsRenderer, "52.535614, -7.285257", "52.571321, -1.585436")

}

  function calculateAndDisplayRoute(directionsService, directionsRenderer, p1, p2) {
    directionsService.route(
      {
        origin: {
          query: p1,
        },
        destination: {
          query: p2,
        },
        travelMode: google.maps.TravelMode.DRIVING
      },
      (response, status) => {
        if (status === "OK") {
          directionsRenderer.setDirections(response);
        } else {
          window.alert("Directions request failed due to " + status);
        }
      }
    );
}

Answer 1

要更改路线颜色，请使用polylineOptions

要抑制标记：suppressMarkers: true

const directionsRenderer = new google.maps.DirectionsRenderer({
    suppressMarkers: true, 
    polylineOptions:{strokeColor:"#00FF00", strokeWeight:4}
});

proof of concept fiddle

代码片段：

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    polylineOptions: {
      strokeColor: "#00FF00",
      strokeWeight: 4
    }
  });
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: {
      lat: 52.896874,
      lng: -1.431861
    },

  });

  directionsRenderer.setMap(map);

  calculateAndDisplayRoute(directionsService, directionsRenderer, "52.535614, -7.285257", "52.571321, -1.585436")

}

function calculateAndDisplayRoute(directionsService, directionsRenderer, p1, p2) {
  directionsService.route({
      origin: {
        query: p1,
      },
      destination: {
        query: p2,
      },
      travelMode: google.maps.TravelMode.DRIVING
    },
    (response, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
      } else {
        window.alert("Directions request failed due to " + status);
      }
    }
  );
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Directions Service</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

您可以更改 googlemaps Api 路线的颜色和图钉吗？

Can you change the color and pins of the googlemaps Api route?

html

javascript

google-maps

google-maps-api-3