Google map 中 Marker 使用自定义图标

因为在项目中要在 google 地图上显示车辆图标, 并且用图标车头的指向来表示当前车辆的方位 , 因此不能使用google map中提供的图标, 必须使用自定义的车辆图标.

(1) 准备图标档:

Marker 图标必须为 .png 透明格式档;

将360度划分为16个方位, 即从正北, 北偏东, 东北, 东偏北, 正东, .. 顺时针方向到北偏西.

在 photoshop 平面图像处理软件中先做一个 32x32 大小的 正北方向的车辆图标档 , 保存为 png透明格式, 依次顺时针旋转 24.5 度, 制作出剩余的图标档;

(2) 态html网页脚本如下:

< 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; charset=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 = [ " 名称=car1 \n 时间=2011-7-9 11:33:36 \n 速度=0 \n 方位=北偏西 \n 维度=31.972, 经度=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)  根据获取的车辆定位信息更新上面脚本中的var vMarker 和 var image 相关信息, 生成临时html 脚本文件, 再在 WebBrowser 组件中显示出来.

(4)  当定位信息有更新时, 只需要重新临时脚本文件即可.

其中图标档路径调试了多次才明白要设置成这样的格式才可以: C://img//car.png .

记录下来以备参考.

转载于:https://www.cnblogs.com/csMapx/archive/2011/07/09/2101720.html