如何更改 Google Maps v3 API for Directions 中的开始和结束标记图像答案

【问题标题】：How do I change the Start and End marker image in Google Maps v3 API for Directions如何更改 Google Maps v3 API for Directions 中的开始和结束标记图像
【发布时间】：2010-11-30 10:59:41
【问题描述】：

我在使用 DirectionsRender 时绘制的路线很好，但我不知道如何用我自己的替换通用 Google 标记。

我知道并在正常的谷歌地图情况下使用它，但发现很难用开始和结束的方向标记来做到这一点。

如果这是一个愚蠢的问题，感谢任何建议、指点或温和的嘲笑：D

迈克尔

【问题讨论】：

标签： javascript google-maps-markers

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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
            });

【讨论】：

他在问如何更改渲染方向上的标记，这只是回答如何更改标记图标。

【解决方案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
                });

您还可以为起点和终点添加不同的图标。只需使用 var 图像，它对我有用！

【讨论】：