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          });