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, "我爱你!"); 40 map.addOverlay(textOverlay); 41 });
