Четкие указания на Google Map с VueJS

Question

В моем приложении есть следующий код:

createCargoRoute: function(cargo_id) {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var storehouse = new google.maps.LatLng(53.243757, 50.269379);
    var cargo_orders = this.orders.filter(order => this.cargos[cargo_id]['orders_ids'].includes(order.id));
    var cargo_waypoints = cargo_orders.map(cargo_order => cargo_order['waypoint']);

    directionsDisplay.setMap(this.$refs.olkonmap.$mapObject);

    directionsService.route({
      origin: storehouse,
      destination: storehouse,
      travelMode: 'DRIVING',
      waypoints: cargo_waypoints,
      optimizeWaypoints: true
    }, function(result, status) {
      if(status == 'OK') {
        directionsDisplay.setDirections(result);
      }
    });
  },

Это работает, но когда я вызываю его во второй раз, чтобы нарисовать другой маршрут, первый маршрут не удаляется с карты. Я прочитал, что мне нужно позвонить directionsDisplay.setDirections(null), чтобы очистить направления, и это работает, например, если я добавлю setTimeout(function() { directionsDisplay.setDirections(null); }, 2000); createCargoRoute функция.

Но если я добавлю directionsDisplay.setDirections(null); перед любыми действиями в createCargoRoute , это не повлияет на второй вызов. Я думаю, это может быть связано с новым объектом DirectionsRenderer, который создается каждый раз, когда я вызываю функцию. Любой совет будет принят во внимание. Спасибо!

Answer 1

Это не очень хорошая идея создавать новые DirectionsService и DirectionsRenderer при каждом вызове.Переместите их в mounted() и сохраните экземпляры в опциях компонента (вместо того, чтобы поместить их в data).Может быть, это поможет:

export default {
    // will be accessible via this.$options because no reactive data is needed
    directionsService: null, 
    directionsDisplay: null,     
    mounted() {
        this.$options.directionsService = new google.maps.DirectionsService();
        this.$options.directionsDisplay = new google.maps.DirectionsRenderer();
        this.$options.directionsDisplay.setMap(this.$refs.olkonmap.$mapObject);
    },
    methods: {
        createCargoRoute: function(cargo_id) {

            // clear existing directions
            this.$options.directionsDisplay.set('directions', null);                

            var storehouse = new google.maps.LatLng(53.243757, 50.269379);
            var cargo_orders = this.orders.filter(order => this.cargos[cargo_id]['orders_ids'].includes(order.id));
            var cargo_waypoints = cargo_orders.map(cargo_order => cargo_order['waypoint']);

            this.$options.directionsService.route({
                origin: storehouse,
                destination: storehouse,
                travelMode: 'DRIVING',
                waypoints: cargo_waypoints,
                optimizeWaypoints: true
            }, (result, status) => {
                if(status == 'OK') {
                   this.$options.directionsDisplay.setDirections(result);
                }
            });
        },
    }
}