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     }

 

使用方法：

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