我们都知道，百度地图默认的标注点，就是一个红点点，上面大，下面小，酷似一个红气球。写上文字后，一个红框，加文字，整体感觉特别粗糙； 那么如何修改这个不完美的现状呢？ 幸好，百度地图api 提供了一个
我们都知道，百度地图默认的标注点，就是一个红点点，上面大，下面小，酷似一个红气球。写上文字后，一个红框，加文字，整体感觉特别粗糙；
那么如何修改这个不完美的现状呢？
幸好，百度地图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>
