javascript - 使用 VueJS 在 Google map 上明确指示

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);
      }
    });
  },

它有效，但是当我第二次调用它来绘制另一条路线时，第一条路线不会从 map 中删除。我读到我需要调用 directionsDisplay.setDirections(null) 来清除方向并且它有效，例如，如果我添加 setTimeout(function() { directionsDisplay.setDirections(null); } , 2000);createCargoRoute 函数。

但是如果我在 createCargoRoute 中的任何操作之前添加 directionsDisplay.setDirections(null);，它在第二次调用时无效。我认为，这可能是由于新的 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);
                }
            });
        },
    }
}