google map自定义GMarker的方法二

以前写过一个实现自定义google地图的文字Marker的方法google map使用自定义Marker在地图上添加文字标示，实现的方法是继承google map的GMarker。GMarker是继承的GOverlay，所以也可以直接继承GOverlay实现自定义的地图标记。

接口 GOverlay

地图 API 库中的 GMarker、GPolyline、GTileLayerOverlay 和 GInfoWindow 类都是通过此接口实现的。如果希望在地图上显示自定义的叠加层对象类型，可以实现这一功能。可使用 GMap2.addOverlay() 方法将 GOverlay 的实例放置于地图上。然后，地图在叠加层实例上调用 GOverlay.initialize() 方法，先将自己显示在地图上。每当地图显示更改时，地图都会调用 GOverlay.redraw()，这样叠加层就可以在需要时对自己进行重新放置。叠加层实例可使用方法 GMap2.getPane() 获取一个或多个自己要附加的 DOM 容器元素。

 

 1  google.maps.FocusMarker  =   function (latlng, opt){
 2           this .latlng  =  latlng;
 3           this .innerHtml  =  opt.innerHtml  ||   '' ;
 4           this .className  =  opt.className  ||   '' ;
 5           this .css  =  opt.css  ||  {};
 6           this .id  =  opt.id  ||   '' ;
 7      }
 8      google.maps.FocusMarker.prototype  =   new  google.maps.Overlay();
 9      google.maps.FocusMarker.prototype.initialize  =   function (map){
10           //  创建用于表示该矩形区域的 DIV 元素
11           var  div  =  document.createElement( " div " );
12          div.id  =   this .id  ||   '' ;
13          div.style.width  =   this .css.width  ||   ' auto ' ;
14          div.className  =   this .className;
15          div.style.border  =   this .css.border  ||   " none " ;
16          div.style.color  =   this .css.color  ||   " #ffffff " ;
17          div.style.backgroundColor  =   this .css.backgroundColor  ||   "" ;
18          div.style.position  =   this .css.position  ||   " absolute " ;
19          div.style.textAlign =   this .css.textAlign  ||   " center " ;
20          div.style.padding =   this .css.padding  ||   " 0px 0px 0px 0px " ;
21          div.style.fontSize  =   this .css.fontSize  ||   " 12px " ;
22          div.style.height  =   this .css.height  ||   " 60px " ;
23          div.style.cursor  =   this .css.cursor  ||   " pointer " ;
24          div.style.whiteSpace =   this .css.whiteSpace  ||   " nowrap " ;
25          
26 
27           var  c  =  map.fromLatLngToDivPixel( this .latlng);
28          div.style.left  =  c.x + " px " ;
29          div.style.top  =  c.y + " px " ;
30          div.innerHTML  =   this .innerHtml;
31           //  我们希望将覆盖物紧贴于地图之上，因此我们把它放置在 Z 序最小的 G_MAP_MAP_PANE 层，  
32           //  事实上，这也是地图本身的 Z 顺序，即在标注的影子之下  
33          map.getPane(G_MAP_MAP_PANE).appendChild(div); 
34           this .map  =  map;  
35           this .container  =  div;
36      }
37      google.maps.FocusMarker.prototype.remove  =   function () 
38      {  
39           this .container.parentNode.removeChild( this .container);
40      }
41      google.maps.FocusMarker.prototype.redraw  =   function (force) 
42      {
43           //  只有当坐标系改变时，我们才需要重绘
44           if  ( ! force)  return ;
45 
46           //  根据当前显示区域的经纬度坐标，计算 DIV 元素的左上角和右下角的像素坐标
47           var  c  =   this .map.fromLatLngToDivPixel( this .latlng);
48           //  根据计算得到的坐标放置我们的 DIV 元素
49           this .container.style.left  =  c.x  +   " px " ;
50           this .container.style.top  =  c.y  +   " px " ;
51           //  this.div_.style.width = "auto";
52      }

 

使用方法：

1  map.addOverlay( new  google.maps.FocusMarker(latlng ,{
2              innerHtml :  ' <div class="blmz left bold">时间</div><div class="left yblm">地点</div> '
3          }));