百度API地图 房产频道的标注方法

你是不是看过很多房产网站？例如安居客，新浪乐居。 你是不是也想做一个能写文字的标注？ 你知道怎么去实现麼?其实，上图这样的标注是一个“自定义覆盖物”。你可以任意指定它的样式，文字，图片等等。 首先，我需要初始化地图：

var mp = new BMap.Map("map_container");

var point = new BMap.Point(116.3964,39.9093);

mp.centerAndZoom(point,15); 然后，我建立两个自定义覆盖物：

var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101), "天安门东");

var myCompOverlay2 = new ComplexCustomOverlay(new BMap.Point(116.406946,39.911403), "国家博物馆"); 对自定义覆盖物定义：（包括样式、图片、位置偏移等等）

// 复杂的自定义覆盖物

function ComplexCustomOverlay(point, text){

this._point = point;

this._text = text;

}

ComplexCustomOverlay.prototype = new BMap.Overlay();

ComplexCustomOverlay.prototype.initialize = function(map){

this._map = map;

var div = this._div = document.createElement("div");

div.style.position = "absolute";

div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);

div.style.backgroundColor = "#EE5D5B";

div.style.border = "1px solid #BC3B3A";

div.style.color = "white";

div.style.height = "18px";

div.style.padding = "2px";

div.style.lineHeight = "18px";

div.style.whiteSpace = "nowrap";

div.style.MozUserSelect = "none";

div.style.fontSize = "12px"

div.appendChild(document.createTextNode(this._text));

var arrow = this._arrow = document.createElement("div");

arrow.style.background = "url(/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";

arrow.style.position = "absolute";

arrow.style.width = "11px";

arrow.style.height = "10px";

arrow.style.top = "22px";

arrow.style.left = "10px";

arrow.style.overflow = "hidden";

div.appendChild(arrow);

div.onmouseover = function(){

this.style.backgroundColor = "#6BADCA";

this.style.borderColor = "#0000ff";

arrow.style.backgroundPosition = "0px -20px";

}

div.onmouseout = function(){

this.style.backgroundColor = "#EE5D5B";

this.style.borderColor = "#BC3B3A";

arrow.style.backgroundPosition = "0px 0px";

}

mp.getPanes().labelPane.appendChild(div);

return div;

}

ComplexCustomOverlay.prototype.draw = function(){

var map = this._map;

var pixel = map.pointToOverlayPixel(this._point);

this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";

this._div.style.top = pixel.y - 30 + "px";

} 最后，在地图上把它们添加上来。

mp.addOverlay(myCompOverlay);

mp.addOverlay(myCompOverlay2); 运行示例，请点击：