尝试在角度谷歌地图中删除或更改 <agm-direction> 的默认标记的图标答案

【问题标题】：Trying to remove or Change the icon of default markers of <agm-direction> in angular google maps尝试在角度谷歌地图中删除或更改 <agm-direction> 的默认标记的图标
【发布时间】：2019-09-04 05:38:57
【问题描述】：

我正在实施角度谷歌地图，我从用户那里获取接送和目的地位置，并在角度谷歌地图中通过<agm-direction> 显示方向。我已经在地图上显示了起点和终点的标记，但是在实施<agm-direction> 之后，它开始显示默认标记“A”和“B”。我想从地图中删除这些标记，或者将默认图标从“A”和“B”更改为其他图标。


<agm-map id="map" [latitude]='lat' [longitude]='lng' (mapReady)="addMarker()" [zoom]='zoom'>
    <agm-marker [iconUrl]="curicon" [latitude]="lat" [longitude]="lng"></agm-marker>
    <agm-marker [iconUrl]="desticon" [latitude]="latitude" [longitude]="longitude"></agm-marker>
    <agm-direction [origin]="origin" [destination]="destination" >
    </agm-direction>
</agm-map>

ts code :
public origin: {lat :30.7224576,lng:76.6984192};
public destination: {lat:30.7134158,lng:76.71059969999999};
public curicon="http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
public desticon="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";

【问题讨论】：

curicon 和 desticon 定义为什么？
在 iconUrl 你应该把你的图标文件的路径。
Curicon 和 desticon 是我定义图标 url 的公共变量，这些也显示在地图上，问题在于 <agm-direction [origin]="origin" [destination]="destination" > </agm-direction> 这行代码显示名为“A”的默认标记和'B'。我想删除这些图标

标签： angular google-maps angular7 agm-map

【解决方案1】：

您需要指定<agm-direction>标签的[markerOptions]输入如下：

<agm-direction ... 
[renderOptions]="renderOptions" 
[markerOptions]="markerOptions">
</agm-direction>

在你的 Typescript 中：

   public renderOptions = {
        suppressMarkers: true,
    }

    public markerOptions = {
        origin: {
            icon: 'https://www.shareicon.net/data/32x32/2016/04/28/756617_face_512x512.png',
            draggable: true,
        },
        destination: {
            icon: 'https://www.shareicon.net/data/32x32/2016/04/28/756626_face_512x512.png',
            label: 'MARKER LABEL',
            opacity: 0.8,
        },
    }

如您所见，您可以为标记选择自定义图像。

欲了解更多信息，请查看：https://robby570.tw/Agm-Direction-Docs/source/featured/marker.html

【讨论】：