Question

我有一张地图，我在其中放置自定义标记并计算路线。我有一个选项，我可以选择travelMode。每当我更改travelMode时，我想用新的travelMode等显示一条新路线。但是现在路线将在现有路线上绘制。我无法清除原来的路线。

如何在添加新路线时删除旧路线？

这是JS：

<?php
$params = array_merge(
    require __DIR__ . '/../../common/config/params.php',
    require __DIR__ . '/../../common/config/params-local.php',
    require __DIR__ . '/params.php',
    require __DIR__ . '/params-local.php'
);

return [
    'id' => 'app-backend',
    'basePath' => dirname(__DIR__),
    'controllerNamespace' => 'backend\controllers',
    'bootstrap' => ['log'],
    'modules' => [],
    'components' => [
        'request' => [
            'csrfParam' => '_csrf-backend',
        ],
        'user' => [
            'identityClass' => 'common\models\User',
            'enableAutoLogin' => true,
            'identityCookie' => ['name' => '_identity-backend', 'httpOnly' => true],
        ],
        'session' => [
            'name' => 'advanced-backend',
        ],
        'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
                [
                    'class' => 'yii\log\FileTarget',
                    'levels' => ['error', 'warning'],
                ],
            ],
        ],
        'errorHandler' => [
            'errorAction' => 'site/error',
        ],
        'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
        ],
    ],
    'params' => $params,
];

Answer 1

目前，每次调用DirectionsRenderer（通过DirectionsService函数）时，都会创建routeplannen的新实例。

如果您不希望在地图上单独呈现每个新方向结果，请使用DirectionsRenderer的单个实例并重复使用。

在DirectionsRenderer函数中创建initMap：

var map = new google.maps.Map(document.getElementById('map'), {});
var directionsDisplay = new google.maps.DirectionsRenderer({
  map: map
});

将其传递到routeplannen函数：

document.getElementById('mode').addEventListener('change', function() {
  routeplannen(directionsDisplay);
});

routeplannen(directionsDisplay)

proof of concept fiddle

代码段

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {});
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  var infowindow = new google.maps.InfoWindow({});
  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: iconBestaandeklant,
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
  document.getElementById('mode').addEventListener('change', function() {
    routeplannen(directionsDisplay);
  });
  routeplannen(directionsDisplay)

  function routeplannen(directionsDisplay) {
    var aanvraag = "6826AV";
    var dienstverlener = "6827AV";
    var mode = document.getElementById('mode');
    var selectedMode = mode.options[mode.selectedIndex].value;
    console.log(selectedMode);
    var request = {
      destination: aanvraag,
      origin: dienstverlener,
      travelMode: selectedMode
    };

    if (request.travelMode == "DRIVING") {
      vervoersmiddel = "met de auto"
    } else if (request.travelMode == "BICYCLING") {
      vervoersmiddel = "met de fiets"
    } else if (request.travelMode == "TRANSIT") {
      vervoersmiddel = "met het openbaar vervoer"
    } else {
      vervoersmiddel = "lopend"
    }

    var directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(response, status) {
      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      }
    });

    directionsService.route(request, function(response, status) {

      if (status === 'OK') {
        var point = response.routes[0].legs[0];
        $('#travel_data').html('<strong>Verwachte reistijd ' + vervoersmiddel + ": " + point.duration.text + ' (' + point.distance.text + ')</strong>');
      }
    });
  }
}
var iconBestaandeklant = {
  url: 'http://icons.iconarchive.com/icons/iconshock/vista-general/32/house-icon.png',
};

var Arnhem = {
  title: '<strong>Naam</strong><br>\
                Dienst',
  lat: 51.986847,
  long: 5.955350,
};

var locations = [
  [Arnhem.title, Arnhem.lat, Arnhem.long, 0],
];

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mode">
  <option value="DRIVING">Driving</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

通过travelMode选项更新路线时，无法从Google地图中删除路线

1 个答案: