你是不是看过很多房产网站?例如安居客,新浪乐居。
你是不是也想做一个能写文字的标注?
你知道怎么去实现麼?
![2011041815121817.jpg](https://i-blog.csdnimg.cn/blog_migrate/13a0a0db55deb39e38f668c1f6cc0b39.jpeg)
其实,上图这样的标注是一个“自定义覆盖物”。你可以任意指定它的样式,文字,图片等等。
首先,我需要初始化地图:
var
mp
=
new
BMap.Map(
"
map_container
"
);
var point = new BMap.Point( 116.3964 , 39.9093 );
mp.centerAndZoom(point, 15 );
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 ), " 国家博物馆 " );
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 " ;
}
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);
mp.addOverlay(myCompOverlay2);
运行示例,请点击: