百度地图-鼠标悬停样式 https://gitee.com/richard1015/map_api
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>百度地图demo</title> </head> <body> <div style=" 100%;height: 800px;" id="allmap"> map loading ... </div> <script src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=**************"></script> <script type="text/javascript"> // 百度地图API功能 map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(144.995991, -37.78351), 15); // map.centerAndZoom(new BMap.Point(116.3964, 39.9093), 15); map.enableScrollWheelZoom(); // 复杂的自定义覆盖物 function ComplexCustomOverlay(point, text, mouseoverText) { this._point = point; this._text = text; this._overText = mouseoverText; } 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 = "rgba(0,0,0,0.5)"; // div.style.border = "1px solid #BC3B3A"; div.style.borderRadius = "10px" div.style.color = "white"; div.style.height = "92px"; div.style.width = "202px"; div.style.padding = "2px"; div.style.lineHeight = "24px"; div.style.whiteSpace = "nowrap"; div.style.MozUserSelect = "none"; div.style.fontSize = "12px"; div.style.textAlign = "center"; var span = this._span = document.createElement("p"); var span2 = this._span2 = document.createElement("p"); span.style.marginTop = "16px"; span.style.marginBottom = "16px"; div.appendChild(span); div.appendChild(span2); span.appendChild(document.createTextNode(this._text[0])); span2.appendChild(document.createTextNode(this._text[1])); var that = this; var arrow = this._arrow = document.createElement("div"); arrow.style.background = "url(/imgs/triangle.png) no-repeat"; arrow.style.backgroundSize = "contain"; arrow.style.position = "absolute"; arrow.style.width = "11px"; arrow.style.height = "10px"; arrow.style.top = "92px"; arrow.style.left = "90px"; arrow.style.overflow = "hidden"; div.appendChild(arrow); $(div).mouseenter( function () { if (!this.oldHtml) this.oldHtml = this.innerHTML; var sContent = "<img style='100%' src='" + that._overText[3] + "' />" + "<p style='margin-top:30px;font-size:24px;text-align: center;color:#000;'>" + that._overText[0] + "</p>" + "<p style='margin-top:20px;font-size:18px;text-align: center;color:#999999;'>" + that._overText[1] + "</p>" + "<p style='margin-top:20px;padding:5px 0;font-size:18px;text-align: center;color:#4faee1;border:1px solid #4faee1;'>" + that._overText[2] + "</p>"; this.style.width = "246px"; this.style.height = "303px"; this.style.borderRadius = "0px"; this.style.backgroundColor = "rgba(255,255,255)"; this.innerHTML = sContent; }); $(div).mouseleave( function () { this.innerHTML = this.oldHtml; this.style.height = "92px"; this.style.width = "202px"; this.style.borderRadius = "10px"; this.style.backgroundColor = "rgba(0,0,0,0.5)"; }); map.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 - 115 + "px"; } var data_info = [ [144.995991, -37.78351, ["麦考瑞大学学生公寓", "Australia,Sydney", "66万澳币起,首付10%", "/imgs/room-pic.png"]], [144.972347, -37.769135, ["Finery", "Australia,Sydney", "66万澳币起,首付10%", "/imgs/room-pic.png"]], [145.025383, -37.796229, ["Pagewood Green", "Australia,Sydney", "66万澳币起,首付10%", "/imgs/room-pic.png"]], [144.921705, -37.788758, ["探索夫雷明酒店", "Australia,Sydney", "66万澳币起,首付10%", "/imgs/room-pic.png"]] ]; for (var i = 0; i < data_info.length; i++) { var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1])); // 创建标注 var content = data_info[i][2]; var txt = content, mouseoverTxt = content; var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(data_info[i][0], data_info[i][1]), content, mouseoverTxt); map.addOverlay(myCompOverlay); } </script> </body> </html>