【发布时间】:2011-06-16 08:53:41
【问题描述】:
我希望在谷歌地图中使用 DirectionsRender 时更改标记图标。我从here 中找到了如何将两个标记更改为同一个图标,但我正在寻找起点和终点的自定义图标。有什么想法吗?
编辑:我正在寻找如何将单独的图标分配给开始和结束标记。我知道如何为两者更改它,但事实证明使用不同的标记图标很困难。
【问题讨论】:
标签: javascript google-maps google-maps-api-3
我希望在谷歌地图中使用 DirectionsRender 时更改标记图标。我从here 中找到了如何将两个标记更改为同一个图标,但我正在寻找起点和终点的自定义图标。有什么想法吗?
编辑:我正在寻找如何将单独的图标分配给开始和结束标记。我知道如何为两者更改它,但事实证明使用不同的标记图标很困难。
【问题讨论】:
标签: javascript google-maps google-maps-api-3
按照他们在您链接到的页面上说的做:
【讨论】:
对于那些像我一样需要示例的人,这是一个基本示例:
// Map and directions objects
var map = new google.maps.Map( element, options );
var service = new google.maps.DirectionsService();
var directions = new google.maps.DirectionsRenderer({suppressMarkers: true});
// Start/Finish icons
var icons = {
start: new google.maps.MarkerImage(
// URL
'start.png',
// (width,height)
new google.maps.Size( 44, 32 ),
// The origin point (x,y)
new google.maps.Point( 0, 0 ),
// The anchor point (x,y)
new google.maps.Point( 22, 32 )
),
end: new google.maps.MarkerImage(
// URL
'end.png',
// (width,height)
new google.maps.Size( 44, 32 ),
// The origin point (x,y)
new google.maps.Point( 0, 0 ),
// The anchor point (x,y)
new google.maps.Point( 22, 32 )
)
};
service.route( { origin: origin, destination: destination }, function( response, status ) {
if ( status == google.maps.DirectionsStatus.OK ) {
display.setDirections( response );
var leg = response.routes[ 0 ].legs[ 0 ];
makeMarker( leg.start_location, icons.start, "title" );
makeMarker( leg.end_location, icons.end, 'title' );
}
});
function makeMarker( position, icon, title ) {
new google.maps.Marker({
position: position,
map: map,
icon: icon,
title: title
});
}
来自路线请求的响应会根据您路线上的停靠点数返回一个航段。我只是在做 A 到 B 的路线,所以只走第一站,并获得标记需要去的位置,并为这些地点创建标记。
【讨论】:
directions 变量。 {suppressMarkers: true} 关闭默认标记。
adp-marker 类,因此您可以将该元素的 src 属性设置为与标记图标相同的 url。如果您想要自定义信息窗口,请使用suppresInfoWindows: true。查找adp-placemark 元素并更改其父项的点击事件以打开您自己的信息窗口。