我们都知道,百度地图默认的标注点,就是一个红点点,上面大,下面小,酷似一个红气球。写上文字后,一个红框,加文字,整体感觉特别粗糙;
那么如何修改这个不完美的现状呢?
幸好,百度地图api 提供了一个 覆盖物对象;
,我们采用JavaScript 原型模式,继承一个覆盖物对象;
// 复杂的自定义覆盖物
function HouseOverlay(point, type, text, mouseoverText, infoWindow){
this._point = point;
this._text = text;
this._overText = mouseoverText;
this._infoWindow = infoWindow;
this._type = type;
}
HouseOverlay.prototype = new BMap.Overlay();
HouseOverlay.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.whiteSpace = "nowrap";
div.innerHTML='<dd class="tagline5 mapdd"><div class="l"><div class="c">'+this._text+'</div></div><div class="r"></div></dd>';
var that = this;
var arrow = this._arrow = document.createElement("div");
arrow.className = 'arr_5';
arrow.style.position = "absolute";
arrow.style.top = "20px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
div.onmouseover = function(){
}
div.onmouseout = function(){
}
div.onclick = function (){
}
this._map.getPanes().labelPane.appendChild(div);
return div;
}
HouseOverlay.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";
}
有了这个覆盖物对象, 可以在设定的坐标点上显示出一个覆盖物。
下面是创建一个百度地图:
// 百度地图API功能
var map = new BMap.Map("Baidu_map");
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
var lan = document.getElementById("tempdriver_lng").value;//地图坐标的经纬度
var lat = document.getElementById("tempdriver_lat").value;
var point = new BMap.Point(lan,lat);
map.centerAndZoom(point, 18);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var myCompOverlay = new HouseOverlay(point,1, "[!--title--]","[!--title--]" , new BMap.InfoWindow("[!--title--]"));
map.addOverlay(myCompOverlay);
这个时候,显示出来的覆盖物没有css 美化;
加上 下面的样式,就完美了:
<style>
.map{}
.blue{padding:0px 3px;}
dd.mapdd{ margin:0px; padding:0px; margin-left:0px; float:left; position:absolute; top:-7px;}
dd.mapdd .l{display:block; margin-left:0px; float:left; }
dd.mapdd .r{display:block; }
dd.mapdd .c{ padding:6px 4px 8px 8px; color:#fff; margin-right:4px;font-weight:bold; font-size: 12px; line-height: 16px;}
.tagline5 .l{ background:url(/skin/mb001/images/button_1.gif) no-repeat left top; padding-left:3px;}
.tagline5 .r{ background:url(/skin/mb001/images/button_1.gif) no-repeat right top; padding-right:5px;}
.arr_5 { background:url(/skin/mb001/images/arr_1.gif); width: 11px; height: 10px; top: 20px; left: 10px; }
.BMap_bubble_content{line-height:22px;}
.BMap_bubble_content h4{font-size:14px;color:#c00}
.BMap_bubble_content span{color:#999;cursor: pointer;}
</style>