你看过房产地图吗？你知道房产标注是如何建立的吗？

• 博客园
• 闪存
• 首页
• 新随笔
• 联系
• 管理
• 订阅

随笔- 85  文章- 0  评论- 629 

【百度地图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(http://map.baidu.com/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);

运行示例，请点击：

http://ui-love.com/baidumap/customoverlay.html