google map使用自定义Marker在地图上添加文字标示

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  }

 在页面上调用的代码：

 

1  var marker = new  google.maps.LabelMarker(map.getCenter(), { 
2      labelText:'我在这'
3      });
4          
5  map.addOverlay(marker);

 

现在就会在地图上显示我们自定义的GMarker标识了。

 

http://www.cnblogs.com/hyl8218/archive/2009/12/26/1632524.html