Use custom icons for marker in Google Map

Because the vehicle icon should be displayed on the Google map in the project, and the orientation of the current vehicle should be indicated by the front of the icon, the icon provided in Google map cannot be used, you must use a custom vehicle icon.

(1) Prepare the icon file:

The marker icon must be in. PNG transparent format;

Divide 360 degrees into 16 orientations, that is, from north, north to East, northeast, east to north, east to East,... clockwise to north to West.

First, create a 32x32 vehicle icon file in the north direction in Photoshop graphic processing software, save it as PNG transparent format, rotate 24.5 degrees clockwise in turn, and create the remaining Icon files;

(2) The web page script of the State HTML is as follows:

 <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >   
  <  Head  >   
 <  Meta  Name  = "Viewport"  Content  = "Initial-scale = 1.0, user-scalable = No"     />   
  <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"    />   
  <  Script  Type  = "Text/JavaScript"  SRC  = "Http://maps.google.cn/maps/api/js? Sensor = false"  >     </  Script  >   
  <  Title >  Google Maps  </  Title  >   
  <  Style  Type  = "Text/CSS"  >   
Html  {  Height  : 100%  ;     }   
Body  {  Height  :  100%  ;  Margin  : 0px  ;  Padding  :  0px  ;     }   
# Map_canvas  {  Width  : 100%  ;  Height  :  100%  ;  Margin  :  1px auto  ;     }  
  </  Style  >   
  <  Script  Type  = "Text/JavaScript"  >   
  Function  Initialize (){
  VaR Myoptions  =  {
Zoom:  15  ,
Center:  New  Google. Maps. latlng (  31.97224  ,  118.81835  ),    Maptypeid: Google. Maps. maptypeid. Hybrid  //  Roadmap, satellite, hybrid, terrain  
  }
  VaR  Map  =     New Google. Maps. Map (document. getelementbyid (  "  Map_canvas  "  ), Myoptions );
  VaR  Vmarker  =  [  " Name = car1 \ n time = 2011-7-9 11:33:36 \ n speed = 0 \ n orientation = North to West \ n dimension = 31.972, longitude = 118.818  "  ,  31.97224  ,  118.81835  ,  0  ];  //  Replace marker 
     VaR  Pos  =  Vmarker;
  VaR  Image  =  '  D: // C #. Projects // googlegps // bin // debug // googlecar // car16.png '  ;
  VaR  Mylatlng  =     New  Google. Maps. latlng (Pos [  1  ], POS [  2  ]);
 VaR  Marker  =     New  Google. Maps. Marker ({
Position: mylatlng,
Map: map,
Title: POS [  0  ],
Icon: image,
Zindex: POS [  3  ]
});
}
  </ Script  >  
  </  Head  >  
  <  Body  Onload  = "Initialize ()"  >  
  <  Div  ID  = "Map_canvas" > </  Div  >  
  </  Body  >  
  </  Html  > 

(3) update the information in the above script based on the obtained vehicle positioning informationVaRVmarker andVaRImage Information, generate a temporary HTML Script file, and then display it in the webbrowser component.

(4) When the positioning information is updated, you only need to re-run the temporary script file.

After debugging the icon file path for multiple times, you must set it to the following format: C: // IMG // car.png.

Record it for reference.