你能改变谷歌地图 Api 路线的颜色和大头针吗？ [复制]答案

【问题标题】：Can you change the color and pins of the googlemaps Api route? [duplicate]你能改变谷歌地图 Api 路线的颜色和大头针吗？ [复制]
【发布时间】：2020-07-31 04:57:27
【问题描述】：

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

Current

Desired

我知道在谷歌文档中他们有一系列样式更改，但所有这些都直接影响地图，我找不到任何可以应用于路线/路线标记的东西 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);
        }
      }
    );
}

【问题讨论】：

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

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

要抑制标记：suppressMarkers: true

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

proof of concept fiddle

代码 sn-p：

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>

【讨论】：