如何使用多色折线绘制谷歌地图航路点

Posted 2023-05-06

【中文标题】如何使用多色折线绘制谷歌地图航路点

【英文标题】：how to draw a google maps waypoint with multi-colored polylines

【发布时间】：2016-06-29 14:11:57

【问题描述】：

您好，我尝试在谷歌地图上绘制带有方向航路点的折线。

我尝试过类似的方法。 My draw 我想像这样画出不同颜色的路线。

Google maps directions example ss

我写了这个示例代码。

 function initMap() 
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), 
      zoom: 6,
      center: lat: 41.85, lng: -87.65
    );
    directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  

  function calculateAndDisplayRoute(directionsService, directionsDisplay) 
    var waypts = [
          
            location: '41.062317, 28.899756',
            stopover: true
          ,
          
            location: '41.062276, 28.898866',
            stopover: true
          ,
          
            location: '41.061993, 28.8982',
            stopover: true
          
        ];
    directionsService.route(
      origin: lat: 41.063328, lng:28.901215,
      destination:lat: 41.060756, lng:28.900046,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
    , function(response, status) 
      if (status === google.maps.DirectionsStatus.OK) 
        directionsDisplay.setOptions(
          directions :response,
        )
        drawpolylines(directionsDisplay.getMap())
        var route = response.routes[0];

       else 
        window.alert('Directions request failed due to ' + status);
      
    );

  

  function drawpolylines(map) 
     var flightPlanCoordinates = [
      lat: 41.062317, lng: 28.899756,
      lat: 41.062276, lng: 28.898866,
    ];
    var flightPath = new google.maps.Polyline(
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    );

    flightPath.setMap(map);
  

【参考方案1】：

您需要为每个彩色线段创建单独的折线。下面的示例使用来自此相关问题的 renderDirectionsPolylines 的修改版本：Google Maps click event on route（修改为使用颜色数组，将每种颜色应用于数字路径中的步骤）。

proof of concept fiddle

代码 sn-p：

var map;
var infowindow = new google.maps.InfoWindow();

function initMap() 
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer(
    suppressPolylines: true,
    infoWindow: infowindow
  );
  map = new google.maps.Map(document.getElementById('map'), 
    zoom: 6,
    center: 
      lat: 41.85,
      lng: -87.65
    
  );
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);


function calculateAndDisplayRoute(directionsService, directionsDisplay) 
  var waypts = [
    location: '41.062317, 28.899756',
    stopover: true
  , 
    location: '41.062276, 28.898866',
    stopover: true
  , 
    location: '41.061993, 28.8982',
    stopover: true
  ];
  directionsService.route(
    origin: 
      lat: 41.063328,
      lng: 28.901215
    ,
    destination: 
      lat: 41.060756,
      lng: 28.900046
    ,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  , function(response, status) 
    if (status === google.maps.DirectionsStatus.OK) 
      directionsDisplay.setOptions(
        directions: response,
      )
      var route = response.routes[0];
      renderDirectionsPolylines(response, map);
     else 
      window.alert('Directions request failed due to ' + status);
    
  );



google.maps.event.addDomListener(window, "load", initMap);

var polylineOptions = 
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4
;
var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];
var polylines = [];

function renderDirectionsPolylines(response) 
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polylines.length; i++) 
    polylines[i].setMap(null);
  
  var legs = response.routes[0].legs;
  for (i = 0; i < legs.length; i++) 
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) 
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      stepPolyline.setOptions(
        strokeColor: colors[i]
      )
      for (k = 0; k < nextSegment.length; k++) 
        stepPolyline.getPath().push(nextSegment[k]);
        bounds.extend(nextSegment[k]);
      
      polylines.push(stepPolyline);
      stepPolyline.setMap(map);
      // route click listeners, different one on each step
      google.maps.event.addListener(stepPolyline, 'click', function(evt) 
        infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      )
    
  
  map.fitBounds(bounds);

html,
body,
#map 
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>