在Vue2中，我试图将谷歌Map的默认标记更改为自定义图像。创建了显示在Map上的自定义标记，但是，当我在它们之间绘制折线时，默认红色标记位于自定义标记上方。我无法隐藏或替换默认标记。
我使用的是vue2-google-maps包。
这是Map的屏幕截图

这是模板

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

directionsRenderer.setDirections(response); in bellow snipet绘制一条线，线的起点和终点使用默认标记。

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

你知道我怎样才能解决这个问题吗？