在谷歌地图方向api V3中更改单个标记 [英] Change individual markers in google maps directions api V3

问题描述

我正在寻找在Google地图中使用DirectionsRender时更改标记图标。我已经从这里如何将两个标记更改为相同的图标，但我正在寻找开始和结束点上的自定义图标。任何想法？

编辑：我正在寻找如何将单独的图标分配给开始和结束标记。我知道如何改变它们，但是有不同的标记图标是很困难的。

解决方案

对于那些需要像我做了，这是一个基本的：

  //地图和方向对象
 var map = new google.maps。地图（元素，选项）; 
 var service = new google.maps.DirectionsService（）; 
 var directions = new google.maps.DirectionsRenderer（{suppressMarkers：true}）; 
 
 //开始/结束图标
 var icons = {
 start：new google.maps.MarkerImage（
 // URL 
'start.png '，
 //（宽度，高度）
新的google.maps.Size（44,32），
 //原点（x，y）
新的google。 maps.Point（0，0），
 //定位点（x，y）
 new google.maps.Point（22，32）
），
 end：新的google.maps.MarkerImage（
 // URL 
'end.png'，
 //（宽度，高度）
新增google.maps.Size（44，32） ，
 //原点（x，y）
新google.maps.Point（0，0），
 //定位点（x，y）
 new google.maps.Point（22，32）
）
}; 
 $ b $ 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'）; 
} 
}）; 
函数makeMarker（position，icon，title）{
 google.maps.Marker（{
 position：position，
 map：map，
 icon：icon， 
 title：title 
}）; 
 
 $ / code> 

来自路线请求的响应会根据数量返回一条腿在您的路线上停靠。我只是做一个A到B的路线，所以只需要第一段路线，并获得标记需要去的位置，并为这些点创建标记。

I'm looking to change the marker icons when using the DirectionsRender within a google map. I've figured out from here how to change both the markers to the same icon, but I am looking for custom icons on both the start and end points. Any ideas?

Edit: I'm looking for how to assign separate icons to the start and end markers. I know how to change it for both, but having different marker icons is proving difficult.

解决方案

For those that need an example like I did, here's a basic one:

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

The response from a route request returns a leg(s) depending on the number of stops on your route. I am only doing a A to B route, so just take the first leg, and get the position of where the markers need to go, and create markers for those spots.

这篇关于在谷歌地图方向api V3中更改单个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！