Google map 中 Marker 使用自定义图标
因为在项目中要在 google 地图上显示车辆图标, 并且用图标车头的指向来表示当前车辆的方位 , 因此不能使用google map中提供的图标, 必须使用自定义的车辆图标.
(1) 准备图标档:
Marker 图标必须为 .png 透明格式档;
将360度划分为16个方位, 即从正北, 北偏东, 东北, 东偏北, 正东, .. 顺时针方向到北偏西.
在 photoshop 平面图像处理软件中先做一个 32x32 大小的 正北方向的车辆图标档 , 保存为 png透明格式, 依次顺时针旋转 24.5 度, 制作出剩余的图标档;
<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 .
记录下来以备参考.
~做事情贵在坚持~
