Gmap开发-默认marker和自定义marker

在做项目demo中使用到了Gmap，但默认的marker不能满足需求，所以需要自定义的marker：
1、默认的marker：js代码

// 名称转换为经纬度的工具类var geocoder = null;// 地图对象var map = null;function getDtcAndGps() {	$.Ajax( {			url : $.webPath + 'obd/monitor/getMonitorRtDtc.do',			success : function(data) {				if (data.errMsg) {					$.alert(data.errMsg);				} else {					// 成功的话清空原来的定位点			map.clearOverlays();			if ($.isNull(data.dtcMap)) {				// 为空，则重新设置地图中心			map.setCenter(new GLatLng(22.5373, 113.9392), 14);		} else {			$("#carContentDiv").empty();			var html = "";			var index = 0;			var markers = [];			$.each(data.dtcMap, function(key, value) {				html += "<div id='" + key + "' class='carImg br'><img src='" + $.webPath						+ "resources/images/demo/car1.jpg' class='carIcon'/>" + key						+ "<span id='titleTip'>" + value.dtcMsg + "</span></div>";				// html += value;					// html += key;					// // 创建地图点					// if (index == 0) {					//											// // 设置了放大级别为5					// map.setCenter(new GLatLng(parseFloat(value.latitude),					// parseFloat(value.longitude)), 5);					//											// // 如果不设置放大级别，则默认为当前地图的放大级别					// map.setCenter(new GLatLng(parseFloat(value.latitude),					//								parseFloat(value.longitude)));					//					}					var marker = createMarker(new GLatLng(parseFloat(value.latitude),							parseFloat(value.longitude)), index, key);					index += 1;				});			$(html).appendTo("#carContentDiv");			$.each(markers, function(i, marker) {				map.addOverlay(marker);			});			// $.alert(data.dtcMap);		}	}}	});}// 创建信息窗口显示对应给定索引的字母的标记function createMarker(point, index, msg) {	// Create a lettered icon for this point using our icon class	var letter = String.fromCharCode("A".charCodeAt(0) + index);	// 为所有标记创建指定阴影、图标尺寸灯的基础图标	var baseIcon = new GIcon();	baseIcon.shadow = "http://www.google.cn/mapfiles/shadow50.png";	baseIcon.iconSize = new GSize(20, 34);	baseIcon.shadowSize = new GSize(37, 34);	baseIcon.iconAnchor = new GPoint(9, 34);	baseIcon.infoWindowAnchor = new GPoint(9, 2);	baseIcon.infoShadowAnchor = new GPoint(18, 25);	var letteredIcon = new GIcon(baseIcon);	letteredIcon.image = "http://www.google.cn/mapfiles/marker" + letter + ".png";	// 设置 GMarkerOptions 对象	markerOptions = {		icon : letteredIcon	};	var marker = new GMarker(point, markerOptions);	GEvent.addListener(marker, "click", function() {		marker.openInfoWindowHtml(msg);	});	return marker;}/** * 页面初始化的时地图的状态，设置为公司的坐标为地图中心 */function init() {	// 默认地图中心，公司地址	var point = new GLatLng(22.5973, 114.0592);	if (GBrowserIsCompatible()) {		map = new GMap2(document.getElementById("map"));		// 加入地图缩放工具		map.addControl(new GLargeMapControl());		// 加入地图缩放工具		// map.addControl(new GSmallMapControl());		// 加入地图切换工具		map.addControl(new GMapTypeControl());		// 该地图类型显示带有自然特征（如地形和植被）的地图		map.addMapType(G_PHYSICAL_MAP);		// 卫星地图模式		// map.addMapType(G_SATELLITE_MAP);		map.setCenter(point, 11);		geocoder = new GClientGeocoder();		// 定时询问有故障的车辆		window.setInterval(getDtcAndGps, 20 * 1000);	}}

显示效果

[img]http://dl.iteye.com/upload/attachment/0062/2122/5b4d699b-91cd-3f4d-a6de-b388be3b509f.jpg[/img]

2、自定义的markermarker：

// 名称转换为经纬度的工具类var geocoder = null;// 地图对象var map = null;function getDtcAndGps() {	$.Ajax( {			url : $.webPath + 'obd/monitor/getMonitorRtDtc.do',			success : function(data) {				if (data.errMsg) {					$.alert(data.errMsg);				} else {					// 成功的话清空原来的定位点			map.clearOverlays();			if ($.isNull(data.dtcMap)) {				// 为空，则重新设置地图中心			map.setCenter(new GLatLng(22.5373, 113.9392), 14);		} else {			$("#carContentDiv").empty();			var html = "";			var index = 0;			var markers = [];			$.each(data.dtcMap, function(key, value) {				html += "<div id='" + key + "' class='carImg br'><img src='" + $.webPath						+ "resources/images/demo/car1.jpg' class='carIcon'/>" + key						+ "<span id='titleTip'>" + value.dtcMsg + "</span></div>";				// html += value;					// html += key;					// // 创建地图点					// if (index == 0) {					//											// // 设置了放大级别为5					// map.setCenter(new GLatLng(parseFloat(value.latitude),					// parseFloat(value.longitude)), 5);					//											// // 如果不设置放大级别，则默认为当前地图的放大级别					// map.setCenter(new GLatLng(parseFloat(value.latitude),					//								parseFloat(value.longitude)));					//					}//					var marker = createMarker(new GLatLng(parseFloat(value.latitude),//							parseFloat(value.longitude)), index, key);					var marker = new google.maps.LabelMarker(new GLatLng(parseFloat(value.latitude),							parseFloat(value.longitude)), {labelText:key});					markers.push(marker);					index += 1;				});			$(html).appendTo("#carContentDiv");			$.each(markers, function(i, marker) {				map.addOverlay(marker);			});			// $.alert(data.dtcMap);		}	}}	});}// 自定义marker，继承google的marker对象google.maps.LabelMarker = function(latlng, options){     this.latlng = latlng;     this.labelText = "<b>"+options.labelText + "</b>" || '';     this.labelClass = options.labelClass || 'writeb';     this.labelOffset = options.labelOffset || new google.maps.Size(8, -33);     options.icon = options.icon || getTextIcon();     google.maps.Marker.apply(this, arguments); } google.maps.LabelMarker.prototype = new google.maps.Marker(new google.maps.LatLng(0, 0)); google.maps.LabelMarker.prototype.initialize = function(map){     google.maps.Marker.prototype.initialize.call(this, map);     var label = document.createElement('div');     label.className = this.labelClass;     label.innerHTML = this.labelText;     label.style.position = 'absolute';     label.style.width = '48px';     map.getPane(G_MAP_MARKER_PANE).appendChild(label);     this.map = map;     this.label = label; } google.maps.LabelMarker.prototype.redraw = function(force){     google.maps.Marker.prototype.redraw.call(this, map);     if(!force) {         return;     }     var point = this.map.fromLatLngToDivPixel(this.latlng);     var z = google.maps.Overlay.getZIndex(this.latlng.lat());     this.label.style.left = (point.x + this.labelOffset.width) + 'px';     this.label.style.top = (point.y + this.labelOffset.height) + 'px';     this.label.style.zIndex = z + 1; } google.maps.LabelMarker.prototype.remove = function(){     this.label.parentNode.removeChild(this.label);     this.label = null;     google.maps.Marker.prototype.remove.call(this); } function getTextIcon() {     var icon = new google.maps.Icon();     icon.image = $.webPath + "resources/images/demo/carIcon.jpg";     icon.iconSize = new GSize(20, 18);     icon.shadowSize = new GSize(100, 100);     // 文字信息区坐标，-10表示距离与图片像个10个像素     icon.iconAnchor = new GPoint(-10, 50);     icon.infoWindowAnchor = new GPoint(5, 1);     return icon; }/** * 页面初始化的时地图的状态，设置为公司的坐标为地图中心 */function init() {	// 默认地图中心，公司地址	var point = new GLatLng(22.5973, 114.0592);	if (GBrowserIsCompatible()) {		map = new GMap2(document.getElementById("map"));		// 加入地图缩放工具		map.addControl(new GLargeMapControl());		// 加入地图缩放工具		// map.addControl(new GSmallMapControl());		// 加入地图切换工具		map.addControl(new GMapTypeControl());		// 该地图类型显示带有自然特征（如地形和植被）的地图		map.addMapType(G_PHYSICAL_MAP);		// 卫星地图模式		// map.addMapType(G_SATELLITE_MAP);		map.setCenter(point, 11);		geocoder = new GClientGeocoder();		// 定时询问有故障的车辆		window.setInterval(getDtcAndGps, 20 * 1000);	}}

显示效果

[img]http://dl.iteye.com/upload/attachment/0062/2124/20feccd8-7e52-3b0b-82c7-1458617ccdde.jpg[/img]