Google Directions API - Маршрут размыт после нового запроса - PullRequest
Новая
       48

Google Directions API - Маршрут размыт после нового запроса

0 голосов
/ 13 февраля 2020

вот картинка с проблемой .

Я использую Vue. js для использования REST API, который отправляет данные о предстоящих автобусных передачах. На рисунке выше каждый элемент списка представляет передачу, и при нажатии карта должна показывать маршрут. Когда все в порядке с меньшего на большее, это нормально, но когда я переключаюсь на более короткий маршрут, синяя линия, указывающая, что он размыт и больше, чем обычно . Проблема исчезает при увеличении / уменьшении масштаба, это просто начальный экран.

Я пробовал функцию setZoom (int) на объекте карты после каждого нового запроса, но это не сработало.

Вот соответствующий код из Vue экземпляра: 

methods: {
     ...
        calcRoute() {
          const request = {
            origin: this.start,
            destination: this.end
          }

          this.directionsService.route(request, (result, status) => {
            if (status == 'OK') {
              this.directionsRenderer.setDirections(result);
               //this.map.setZoom(12);
            }
          })
        }
},
watch: {
      start: () => {
        if (this.end && this.start) {
          this.calcRoute();
        }
      },
       ...
    }

РЕДАКТИРОВАТЬ: как было предложено, я предоставил работающий фрагмент кода. Нажмите кнопку ИЗМЕНИТЬ НАПРАВЛЕНИЯ, чтобы увидеть проблему.

РЕДАКТИРОВАТЬ 2: я реализовал ее в чистом JS для простоты

РЕДАКТИРОВАТЬ 3: Укажите свой API-ключ 

const transfers = [{
  "id": 29,
  "date": "2020-02-12T08:00:00.000Z",
  "pick_up": "Sofia Airport, Terminal 1",
  "drop_off": "Stara Zagora",
  "driver": "СТ",
  "vehicle": 6264,
},
{
  "id": 43,
  "date": "2020-02-13T08:30:00.000Z",
  "pick_up": "Sofia Terminal 1",
  "drop_off": "Boutique One Hotel Sofia",
  "driver": "СТ",
  "vehicle": 6264,
}];

let map, directionsService, directionsRenderer;
let selectedTrans = 0;

window.addEventListener('load', function() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: {
      lat: 42.698334,
      lng: 23.319941
    }
  });
  directionsService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);
  calcRoute();
});

function calcRoute() {
  const start = transfers[selectedTrans].pick_up;
  const end= transfers[selectedTrans].drop_off;
  const request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };

  directionsService.route(request, (result, status) => {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  })
}

document.getElementById('changeDirectionsBtn').addEventListener('click', () => {
  selectedTrans = selectedTrans == 0 ? 1 : 0;
  calcRoute();
});
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<button id="changeDirectionsBtn"> Change Directions </button>
<div id="map">
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" defer></script>

1 Ответ

0 голосов
/ 13 февраля 2020

Мне нужно исследовать это немного дальше, когда у меня есть время ...

В документации упоминается, что

Поскольку средство визуализации является MVCObject, он автоматически обнаружит любые изменения в своих свойствах и обновит карту при изменении связанных с ним направлений.

, и я не уверен, что именно это означает.

Что сказал, просто вызов directionsRenderer.setMap(null); перед вычислением нового маршрута и directionsRenderer.setMap(map); в обратном вызове решает проблему. Смотрите фрагмент ниже. 

const transfers = [{
  "id": 29,
  "date": "2020-02-12T08:00:00.000Z",
  "pick_up": "Sofia Airport, Terminal 1",
  "drop_off": "Stara Zagora",
  "driver": "СТ",
  "vehicle": 6264,
},
{
  "id": 43,
  "date": "2020-02-13T08:30:00.000Z",
  "pick_up": "Sofia Terminal 1",
  "drop_off": "Boutique One Hotel Sofia",
  "driver": "СТ",
  "vehicle": 6264,
}];

let map, directionsService, directionsRenderer;
let selectedTrans = 0;

window.addEventListener('load', function() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: {
      lat: 42.698334,
      lng: 23.319941
    }
  });
  
  directionsService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer();
  
  calcRoute();
});

function calcRoute() {

  directionsRenderer.setMap(null);

  const start = transfers[selectedTrans].pick_up;
  const end= transfers[selectedTrans].drop_off;
  const request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };

  directionsService.route(request, (result, status) => {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
      directionsRenderer.setMap(map);
    }
  })
}

document.getElementById('changeDirectionsBtn').addEventListener('click', () => {
  selectedTrans = selectedTrans == 0 ? 1 : 0;
  calcRoute();
});
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<button id="changeDirectionsBtn"> Change Directions </button>
<div id="map">
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" defer></script>
...