【百度地图API】你看过房产地图吗?你知道房产标注是如何建立的吗?

你是不是看过很多房产网站?例如安居客,新浪乐居。
你是不是也想做一个能写文字的标注?
你知道怎么去实现麼?
【百度地图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);
运行示例,请点击:

你可能感兴趣的:(百度地图)