如何在Google Maps v3 API中更改方向路线起点和终点标记图像

Question

我已经用DirectionsRender成功绘制了一条路线，但我不知道如何将通用的Google标记替换为自己的标记。

在普通的Google地图情况下，我知道并使用这个功能，但是在起点和终点的方向标记上使用它让我感到困难。

非常感谢任何建议、指导或轻微嘲笑，如果这是一个愚蠢的问题 :D

迈克尔

- Michael Law

Answer 1

DirectionRender接受一个名为markerOptions的选项。引用API文档的话：

由DirectionsRenderer渲染的所有标记都将使用这些选项。

因此，如果您想设置标记，请使用MarkerImage（如philar所示）。

您的另一个选择是将suppressMarkers：true传递给DirectionRender的选项，然后仅使用自己的标记。

- Sean Vieira

Answer 2

这是你需要处理它的方法。

请按照以下方式声明所有图像图标。

var movingIcon = new google.maps.MarkerImage('/img/icon_moving.jpg');
var startIcon = new google.maps.MarkerImage('/img/icon_start.png');

然后，在创建标记时，使用图标选项将特定的图片设置为该标记

marker = new google.maps.Marker({
            position: point,
            map: map,
            icon: movingIcon
            });

- Philar

---

他正在询问如何更改方向呈现中的标记符号，这只回答了如何更改标记符号图标。 - Danny C

Answer 3

首先需要在你的DirectionsRenderer中添加以下内容

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
//to hide the default icons

然后是选项等等...

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//you set your custom image
var image = new google.maps.MarkerImage('images/image.png',
                    new google.maps.Size(129, 42),
                    new google.maps.Point(0,0),
                    new google.maps.Point(18, 42)
                );

//you set your icon for each of the direction points Origin
                var marker1 = new google.maps.Marker({
                    position: new google.maps.LatLng(19.432651,-99.133201),
                    map: map,
                    icon: image
                });
//you set your icon for each of the direction points Destination,
                var marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(45.508648,-73.55399),
                    map: map,
                    icon: image
                });

你还可以为起点和终点添加不同的图标。只需调整变量image，这对我有效！

- riva