在Google地图JavaScript/Vue中，折线的开始和结束处的默认标记位于我的自定义标记上方

在Vue2中，我试图将谷歌地图的默认标记更改为自定义图像。创建了在地图上显示的自定义标记，但当我在它们之间绘制折线时，默认的红色标记位于自定义标记上方。我无法隐藏或替换默认标记。

我使用vue2-google-maps包。

这是地图的截图

这是模板

<template>
  <div>
    <GmapMap
      :center="center"
      :zoom="zoom"
      map-type-id="roadmap"
      style="width: 100%; height: 300px"
      ref="map"
      >
      <GmapMarker
        v-for="(m, index) in markers"
        :key="index"
        :ref="`marker${index}`"
        :position="m.position"
        :clickable="true"
        :icon="m.icon"
      />
      <DirectionsRenderer
       v-if='start!=null'
      travelMode="DRIVING"
      :origin="origin"
      :destination="destionation"/>
    </GmapMap>
  </div>
</template>

这是脚本部分

<script>
import DirectionsRenderer from './DirectionsRenderer.js'
export default{
  components: {DirectionsRenderer},
  data:()=>({
    markers:[],
    center:{lat:49.2831066, lng:-123.1031387},
    zoom:10,
    start:null,
    end:null,
  }),
 
  computed: {
    origin() {
      if (!this.start) return null;
      return { query: this.start };
    },
    destionation() {
      if (!this.end) return null;
      return { query: this.end };
    }
  },
  methods:{
    drawRoute(){
      this.start = this.order.from.formatted_address;
      this.end = this.order.to.formatted_address;
    },
    setBounds(){
      const bounds = new google.maps.LatLngBounds()
        for (let m of this.markers) {
          bounds.extend(m.position)
        }
        this.$refs.map.fitBounds(bounds)
    },
    init(){
      this.markers=[
        {
          position: {lat:49.2831066 ,lng:-123.1031387},
          icon: 
          { 
            url: '/images/icons/pickup.png',
            size: {width: 60, height: 60, f: 'px', b: 'px',},
            scaledSize: {width: 20, height: 20, f: 'px', b: 'px',},
          }
        },
        {
          position: {lat:49.2544622,lng:-123.1053708},
          icon:{ 
            url: '/images/icons/destination.png',
            size: {width: 60, height: 60, f: 'px', b: 'px',},
            scaledSize: {width: 20, height: 20, f: 'px', b: 'px',},
          }
        }
      ];
      
    }
   this.setBounds();
  },
  created(){
    this.init();
  }
}
</script>

这是DirectionsRenderer.js脚本

import { MapElementFactory } from "vue2-google-maps";

export default MapElementFactory({
    name: "directionsRenderer",

    ctr() {
        return google.maps.DirectionsRenderer;
    },

    events: [],

    mappedProps: {},

    props: {
        origin: { type: Object },
        destination: { type: Object },
        travelMode: { type: String }
    },

    afterCreate(directionsRenderer) {
        let directionsService = new google.maps.DirectionsService();

        this.$watch(
            () => [this.origin, this.destination, this.travelMode],
            () => {
                let { origin, destination, travelMode } = this;
                if (!origin || !destination || !travelMode) return;

                directionsService.route(
                    {
                        origin,
                        destination,
                        travelMode
                    },
                    (response, status) => {
                        if (status !== "OK") return;
                        directionsRenderer.setDirections(response);
                    }
                );
            }
        );
    }
});

我尝试了不使用任何包，但相同的结果默认标记放置在我的自定义标记上。下面是我的部分代码，用于绘制路线并导致默认标记。

directionsService.route(
          {
            origin: this.origin,
            destination: this.destination,
            travelMode: google.maps.TravelMode.DRIVING,
          },
          (response, status) => {
            if (status === google.maps.DirectionsStatus.OK && response) {
              directionsRenderer.setDirections(response);
            } else {
              window.alert("Directions request failed due to " + status);
            }
          }
        );

知道我该怎么解决这个问题吗？