Question

我想在Google地图上显示实时多条路线，我的条件是在这里我想在地图上推送新的即将到来的路线而不会使地图闪烁。我现在正在使用下面的示例来显示多条路线。

jsfiddle.net/mattlokk/mp3q292r/15 /

Answer 1

什么意思而不闪烁。

使用“添加路线”按钮添加路线时，它会闪烁吗？

如果是，则可以在地图顶部显示一两秒钟的装载程序，然后将其隐藏。

var routes = [];
var colors = ["blue", "red", "green", "black", "cyan", "brown", "purple"];
var map, directionsService;

function initialize() {
  routes.push({
    origin: new google.maps.LatLng(34.04429454929703, -118.22793351693724),
    destination: new google.maps.LatLng(33.688522885631706, -116.15151750131224),
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    waypoints: []
  });

  routes.push({
    origin: new google.maps.LatLng(32.69561555501597, -117.06338273568724),
    destination: new google.maps.LatLng(34.525395303965354, -117.27212297006224),
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    waypoints: []
  });

  var mapOptions = {
    center: new google.maps.LatLng(42.5584308, -70.8597732),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsService = new google.maps.DirectionsService();

  for (var i = 0; i < routes.length; i++) {
    directionsService.route(routes[i], displayRoute(colors[i]));
  }

};

function displayRoute(color) {
  return function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay = new google.maps.DirectionsRenderer({
        polylineOptions: {
          strokeColor: color
        },
        suppressMarkers: false,
        suppressInfoWindows: true
      });
      directionsDisplay.setMap(map);
      directionsDisplay.setDirections(response);
    }
  }
}

document.getElementById('add-route').addEventListener('click', function(e) {

  var origin = new google.maps.LatLng(34.04429454929703 + Math.random(), -118.22793351693724 - Math.random());
  var destination = new google.maps.LatLng(33.688522885631706 + Math.random(), -116.15151750131224 - Math.random());
  var route = {
    origin: origin,
    destination: destination,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    waypoints: []
  };

  routes.push(route);

  var color = colors[routes.length - 1];
  directionsService.route(route, displayRoute(color));

  if (routes.length === colors.length) {
    this.style.display = 'none';
  }
});


document.getElementById('add-waypoint').addEventListener('click', function(e) {

  var rand = Math.floor(Math.random() * routes.length);
  var route = routes[rand];
  route.waypoints.push({
    location: new google.maps.LatLng(34.04429454929703 + Math.random(), -118.22793351693724 - Math.random()),
    stopover: true
  });

  var color = colors[rand];
  directionsService.route(route, displayRoute(color));
});

html,
body,
#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%
}

.as-console-wrapper {
  display: none !important;
}

#add-route {
  position: absolute;
  top: 1px;
  right: 1px;
}

#add-waypoint {
  position: absolute;
  top: 1px;
  right: 80px;
}

<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY&callback=initialize"></script>

<div id="map_canvas"></div>

<button id="add-waypoint" title="Randomly adding waypoint">Add Waypoint</button>
<button id="add-route" title="Add random route">Add Route</button>

Google Map多条路线，实时更新新路线

1 个答案: