百度地图-鼠标悬停样式

百度地图-鼠标悬停样式 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>