Mikel
转载：http://www.cnblogs.com/hyl8218/archive/2009/12/26/1632524.html
google map默认的标示GMarker，只能使用图片不能使用文字。但是在实际中，我们不可避免的需要在地图上标示文字信息。例如地名等。Google 地图 API 使我们可以通过扩展GMarker实现自定义的GMarker的子类LabelMarker。
1 google.maps.LabelMarker = function(latlng, options)
2 {
3 this.latlng = latlng;
4 this.labelText = options.labelText || '';
5 this.labelClass = options.labelClass || 'writeb';
6 this.labelOffset = options.labelOffset || new google.maps.Size(8, –33);
7 options.icon = options.icon || getTextIcon();
8 google.maps.Marker.apply(this, arguments);
9 }
10
11 google.maps.LabelMarker.prototype = new google.maps.Marker(new google.maps.LatLng(0, 0));
12
13 google.maps.LabelMarker.prototype.initialize = function(map){
14 google.maps.Marker.prototype.initialize.call(this, map);
15
16 var label = document.createElement('div');
17 label.className = this.labelClass;
18 label.innerHTML = this.labelText;
19 label.style.position = 'absolute';
20 label.style.width = '48px';
21 map.getPane(G_MAP_MARKER_PANE).appendChild(label);
22
23 this.map = map;
24 this.label = label;
25 }
26
27 google.maps.LabelMarker.prototype.redraw = function(force){
28 google.maps.Marker.prototype.redraw.call(this, map);
29
30 if(!force)
31 {
32 return;
33 }
34
35 var point = this.map.fromLatLngToDivPixel(this.latlng);
36 var z = google.maps.Overlay.getZIndex(this.latlng.lat());
37
38 this.label.style.left = (point.x + this.labelOffset.width) + 'px';
39 this.label.style.top = (point.y + this.labelOffset.height) + 'px';
40 this.label.style.zIndex = z + 1;
41 }
42
43 google.maps.LabelMarker.prototype.remove = function(){
44 this.label.parentNode.removeChild(this.label);
45 this.label = null;
46 google.maps.Marker.prototype.remove.call(this);
47 }
48
49 function getTextIcon()
50 {
51 var icon = new google.maps.Icon();
52 icon.image = "/js/map/img/mapts.gif";
53 icon.iconSize = new GSize(48, 40);
54 icon.iconAnchor = new GPoint(0, 40);
55 icon.infoWindowAnchor = new GPoint(5, 1);
56 return icon;
57 }
2 {
3 this.latlng = latlng;
4 this.labelText = options.labelText || '';
5 this.labelClass = options.labelClass || 'writeb';
6 this.labelOffset = options.labelOffset || new google.maps.Size(8, –33);
7 options.icon = options.icon || getTextIcon();
8 google.maps.Marker.apply(this, arguments);
9 }
10
11 google.maps.LabelMarker.prototype = new google.maps.Marker(new google.maps.LatLng(0, 0));
12
13 google.maps.LabelMarker.prototype.initialize = function(map){
14 google.maps.Marker.prototype.initialize.call(this, map);
15
16 var label = document.createElement('div');
17 label.className = this.labelClass;
18 label.innerHTML = this.labelText;
19 label.style.position = 'absolute';
20 label.style.width = '48px';
21 map.getPane(G_MAP_MARKER_PANE).appendChild(label);
22
23 this.map = map;
24 this.label = label;
25 }
26
27 google.maps.LabelMarker.prototype.redraw = function(force){
28 google.maps.Marker.prototype.redraw.call(this, map);
29
30 if(!force)
31 {
32 return;
33 }
34
35 var point = this.map.fromLatLngToDivPixel(this.latlng);
36 var z = google.maps.Overlay.getZIndex(this.latlng.lat());
37
38 this.label.style.left = (point.x + this.labelOffset.width) + 'px';
39 this.label.style.top = (point.y + this.labelOffset.height) + 'px';
40 this.label.style.zIndex = z + 1;
41 }
42
43 google.maps.LabelMarker.prototype.remove = function(){
44 this.label.parentNode.removeChild(this.label);
45 this.label = null;
46 google.maps.Marker.prototype.remove.call(this);
47 }
48
49 function getTextIcon()
50 {
51 var icon = new google.maps.Icon();
52 icon.image = "/js/map/img/mapts.gif";
53 icon.iconSize = new GSize(48, 40);
54 icon.iconAnchor = new GPoint(0, 40);
55 icon.infoWindowAnchor = new GPoint(5, 1);
56 return icon;
57 }
在页面上调用的代码：
1 var marker = new google.maps.LabelMarker(map.getCenter(), {
2 labelText:'我在这'
3 });
4
5 map.addOverlay(marker);
2 labelText:'我在这'
3 });
4
5 map.addOverlay(marker);
现在就会在地图上显示我们自定义的GMarker标识了。
