Javascript 在地图上设置新方向之前，React和Vue Google map API将删除渲染方向

我使用的vue谷歌地图与react谷歌地图类似。 每次我在地图上获得一个新的渲染方向时，旧的方向都不会被删除

我试图将

directionsDisplay

设置为全局，并使用了

this.directionsDisplay.setMap（null）

，但它没有删除旧的渲染方向

data() {
    return {
      showMap: true,
      coords: {
        lat: 51.507441,
        lng: -0.1277
      },
      destination: {
        lat: 51.527182,
        lng: -0.133992
      },
      waypoints: [],

      currnetWayPointIndex: 0,
//Set directionsDisplay global
      directionsService: {},
      directionsDisplay: {}
    }
  }

获取方向函数

getDirection() {
      this.directionsService = new google.maps.DirectionsService()
      this.directionsDisplay = new google.maps.DirectionsRenderer()
//Remove old directions
      this.directionsDisplay.setMap(null)
      this.directionsDisplay.setMap(this.$refs.map.$mapObject)
      const calculatedWayPoint = this.wayPoints
      // google maps API's direction service
      function calculateAndDisplayRoute(
        directionsService,
        directionsDisplay,
        start,
        destination
      ) {
        directionsService.route(
          {
            origin: start,
            destination,
            waypoints: calculatedWayPoint,
            travelMode: 'DRIVING'
          },
          function(response, status) {
            if (status === 'OK') {
              directionsDisplay.setDirections(response)
            } else {
              window.alert('Directions request failed due to ' + status)
            }
          }
        )
      }
      calculateAndDisplayRoute(
        this.directionsService,
        this.directionsDisplay,
        this.coords,
        this.destination
      )
    },

这是我的解决方案

<template>
  <div>
    <gmap-map
      v-show="showMap"
      ref="mapXX"
      :center="coords"
      :zoom="15"
      style="width: 100%; height: 300px"
    >
      <gmap-marker :position="coords"> </gmap-marker>
      <gmap-marker :position="destination"> </gmap-marker>
    </gmap-map>
    <button @click="getDirection">get direction</button>
  </div>
</template>
<script>
/* global google */
export default {
  directionsService: null,
  directionsDisplay: null,
  data() {
    return {
      showMap: true,
      coords: {
        lat: -7.824374,
        lng: 110.262371
      },
      destination: {
        lat: -7.925665,
        lng: 110.298115
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.$gmapApiPromiseLazy().then(() => {
        this.$options.directionsService = new google.maps.DirectionsService()
        this.$options.directionsDisplay = new google.maps.DirectionsRenderer()
        this.$options.directionsDisplay.setMap(this.$refs.mapXX.$mapObject)
      })
    })
  },
  methods: {
    getDirection() {
      this.$gmapApiPromiseLazy().then(() => {
        this.$options.directionsDisplay.set('directions', null)
        this.$options.directionsService.route(
          {
            origin: this.coords,
            destination: this.destination,
            travelMode: 'DRIVING'
          },
          (result, status) => {
            if (status === 'OK') {
              this.$options.directionsDisplay.setDirections(result)
            }
          }
        )
      })
    }
  }
}
</script>

了解方向
/*全球谷歌*/
导出默认值{
DirectionService:null，
方向显示：空，
数据（）{
返回{
showMap：没错，
协调：{
lat:-7.824374，
液化天然气：110.262371
},
目的地：{
lat:-7.925665，
液化天然气：110.298115
}
}
},
安装的（）{
此.$nextTick（函数（）{
这个.$gmapapipPromiseLazy（）。然后（（）=>{
此.$options.directionsService=new google.maps.directionsService（）
此.$options.directionsDisplay=new google.maps.DirectionsRenderer（）
this.$options.directionsDisplay.setMap（this.$refs.mapXX.$mapObject）
})
})
},
方法：{
getDirection（）{
这个.$gmapapipPromiseLazy（）。然后（（）=>{
此.$options.directionsDisplay.set（'directions'，null）
这是。$options.directionsService.route(
{
来源：这是库兹，
目的地：这个目的地，
travelMode:“驾驶”
},
（结果、状态）=>{
如果（状态=='OK'）{
此选项为.$options.directionsDisplay.setDirections（结果）
}
}
)
})
}
}
}

我所有的预览解决方案都失败了，因为我做了两件事： 1我没有等到

google

准备好。现在我使用

this.$gmapapippromiselavy（）。然后（（）=>{
//在这里变魔术
})

2我没有在全局中使用

方向服务

和

方向显示

。现在我使用地图的一个实例。

这是我的解决方案

<template>
  <div>
    <gmap-map
      v-show="showMap"
      ref="mapXX"
      :center="coords"
      :zoom="15"
      style="width: 100%; height: 300px"
    >
      <gmap-marker :position="coords"> </gmap-marker>
      <gmap-marker :position="destination"> </gmap-marker>
    </gmap-map>
    <button @click="getDirection">get direction</button>
  </div>
</template>
<script>
/* global google */
export default {
  directionsService: null,
  directionsDisplay: null,
  data() {
    return {
      showMap: true,
      coords: {
        lat: -7.824374,
        lng: 110.262371
      },
      destination: {
        lat: -7.925665,
        lng: 110.298115
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.$gmapApiPromiseLazy().then(() => {
        this.$options.directionsService = new google.maps.DirectionsService()
        this.$options.directionsDisplay = new google.maps.DirectionsRenderer()
        this.$options.directionsDisplay.setMap(this.$refs.mapXX.$mapObject)
      })
    })
  },
  methods: {
    getDirection() {
      this.$gmapApiPromiseLazy().then(() => {
        this.$options.directionsDisplay.set('directions', null)
        this.$options.directionsService.route(
          {
            origin: this.coords,
            destination: this.destination,
            travelMode: 'DRIVING'
          },
          (result, status) => {
            if (status === 'OK') {
              this.$options.directionsDisplay.setDirections(result)
            }
          }
        )
      })
    }
  }
}
</script>

了解方向
/*全球谷歌*/
导出默认值{
DirectionService:null，
方向显示：空，
数据（）{
返回{
showMap：没错，
协调：{
lat:-7.824374，
液化天然气：110.262371
},
目的地：{
lat:-7.925665，
液化天然气：110.298115
}
}
},
安装的（）{
此.$nextTick（函数（）{
这个.$gmapapipPromiseLazy（）。然后（（）=>{
此.$options.directionsService=new google.maps.directionsService（）
此.$options.directionsDisplay=new google.maps.DirectionsRenderer（）
this.$options.directionsDisplay.setMap（this.$refs.mapXX.$mapObject）
})
})
},
方法：{
getDirection（）{
这个.$gmapapipPromiseLazy（）。然后（（）=>{
此.$options.directionsDisplay.set（'directions'，null）
这是。$options.directionsService.route(
{
来源：这是库兹，
目的地：这个目的地，
travelMode:“驾驶”
},
（结果、状态）=>{
如果（状态=='OK'）{
此选项为.$options.directionsDisplay.setDirections（结果）
}
}
)
})
}
}
}

我所有的预览解决方案都失败了，因为我做了两件事： 1我没有等到

google

准备好。现在我使用

this.$gmapapippromiselavy（）。然后（（）=>{
//在这里变魔术
})

2我没有在全局中使用

方向服务

和

方向显示

。现在我使用地图的一个实例