google map api 自定文字标注(Overlay)

Google Map Api 添加自定叠加层实现须要实现GOverlay接口,须要实现以下几个方法.

• initialize() called in response to GMap2.addOverlay()
• remove() called in response to GMap2.removeOverlay()
• copy() to allow templating of the new overlay
• redraw() called in response to a display change within the map

以下,为实现自定文字标注的例子.

 

 1 function TextOverlay(latLng, html) {
 2             this.latLng = latLng;
 3             this.html = html;
 4         }
 5         TextOverlay.prototype = new google.maps.Overlay();
 6         TextOverlay.prototype.initialize = function(map) {
 7             var div = document.createElement("div");
 8             div.style.position = "absolute";
 9             div.style.width = "1000px";
10             div.innerHTML = this.html;
11             map.getPane(G_MAP_MAP_PANE).appendChild(div);
12             this.map_ = map;
13             this.div_ = div;
14             this.redraw(true);
15         }
16         TextOverlay.prototype.remove = function() {
17             this.div_.parentNode.removeChild(this.div_);
18         }
19         TextOverlay.prototype.copy = function() {
20             return new TextOverlay(this.latLng, this.html);
21         }
22         TextOverlay.prototype.redraw = function(force) {
23             if (!force) {
24                 return;
25             }
26             var position = this.map_.fromLatLngToDivPixel(this.latLng);
27             this.div_.style.left = position.x + "px";
28             this.div_.style.top = position.y + "px";
29         }
30         TextOverlay.prototype.setLatLng = function(latLng) {
31             this.latLng = latLng;
32             this.redraw(true);
33         }
34         TextOverlay.prototype.getLatLng = function() {
35             return this.latLng;
36         }
37         $(function() {
38             var latLng = map.getCenter();
39             var textOverlay = new TextOverlay(latLng, "<span style=\"color:#ff0000; width:auto;\">我爱你!</span>");
40             map.addOverlay(textOverlay);
41         });