devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

百度地图BMapLib.InfoBox 手机兼容源码修改

作者：繁依Fanyi0 | 2024-02-18 18:15:24

赞

踩

bmaplib.infobox
    InfoBox.prototype.initialize = function (map) {
        var me = this;
        var div = this._div = baidu.dom.create('div', { "class": this._opts.boxClass });
        baidu.dom.setStyles(div, this._opts.boxStyle);
        //设置position为absolute，用于定位
        div.style.position = "absolute";
        this._setContent(this._content);

        var floatPane = map.getPanes().floatPane;
        floatPane.style.width = "auto";
        floatPane.appendChild(div);
        //设置完内容后，获取div的宽度,高度
        this._getInfoBoxSize();
        //this._boxWidth = parseInt(this._div.offsetWidth,10);
        //this._boxHeight = parseInt(this._div.offsetHeight,10);
        //阻止各种冒泡事件
        baidu.event.on(div, "onmousedown", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "onmouseover", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "click", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "dblclick", function (e) {
            me._stopBubble(e);
        });
        // 手机端阻止冒泡
        baidu.event.on(div, "touchstart", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "touchend", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "touch", function (e) {
            me._stopBubble(e);
        });

        return div;
    }

 

在电脑上正常，可以关闭弹出窗，手机端不行，参照上面的修改源码部分即可。

问题地址：http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=135430

 源码分享：

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edgechrome=1">
  7.     <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">
  8.     <meta name="format-detection" content="telephone=no">
  9.     <meta name="apple-mobile-web-app-capable" content="yes">
  10.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.     <link rel="stylesheet" type="text/css" href="/css/global.css">
  12.     <link rel="stylesheet" type="text/css" href="/css/main.css">
  13.     <link rel="stylesheet" type="text/css" href="/css/swiper.min.css">
  14.     <title>【斑斓·家】西安服务式酒店公寓地段</title>
  15. </head>
  16. <body>
  17.     <div class="map" id="allmap" style="width: 100%;  font-size: 12px; padding: 0 0px; margin: 0 auto;">
  18.     </div>
  19.     <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
  20.     <script src="/datepicker/js/jquery.cookie.js"></script>
  21.     <script src="/datepicker/js/jquery.cookie.js"></script>
  22.     <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  23.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=e5mycIBbzN1Y2tcat74nacHQTsVbvPoh"></script>
  24.     
  25.     <script src="/Content/baidu/InfoBox.js"></script>
  26.     
  27.     
  28.     <script type="text/javascript" src="http://api.map.baidu.com/library/RichMarker/1.2/src/RichMarker_min.js "></script>
  29.     <style type="text/css">
  30.         /*地图标题*/
  31.         .anchorBL {
  32.             display: none;
  33.         }
  34.         .BMap_bubble_title {
  35.             color: black;
  36.             font-size: 13px;
  37.             font-weight: bold;
  38.             text-align: left;
  39.         }
  40.  
  41.         .BMap_pop div:nth-child(1) {
  42.             border-radius: 7px 0 0 0;
  43.         }
  44.  
  45.         .BMap_pop div:nth-child(3) {
  46.             border-radius: 0 7px 0 0;
  47.             background: #ABABAB;
  48.             /*background: #ABABAB;*/
  49.             width: 23px;
  50.             width: 0px;
  51.             height: 0px;
  52.         }
  53.  
  54.             .BMap_pop div:nth-child(3) div {
  55.                 border-radius: 7px;
  56.             }
  57.  
  58.         .BMap_pop div:nth-child(5) {
  59.             border-radius: 0 0 0 7px;
  60.         }
  61.  
  62.             .BMap_pop div:nth-child(5) div {
  63.                 border-radius: 7px;
  64.             }
  65.  
  66.         .BMap_pop div:nth-child(7) {
  67.             border-radius: 0 0 7px 0;
  68.         }
  69.  
  70.         .BMap_pop div:nth-child div(7) {
  71.             border-radius: 7px;
  72.         }
  73.  
  74.  
  75.         table.customoverlay {
  76.             margin: 20px auto 0px auto;
  77.         }
  78.  
  79.         .overlaybackground {
  80.             background-image: url("/Images/HotPlace/overlaybig.png");
  81.             background-repeat: no-repeat;
  82.             background-position: center;
  83.             width: 98px;
  84.             height: 121px;
  85.             position: absolute;
  86.             color: white;
  87.             white-space: normal;
  88.             line-height: 10px;
  89.             text-align: center;
  90.             font-size: 14px;
  91.         }
  92.  
  93.         .customoverlay th {
  94.             height: 40px;
  95.             min-height: 18px;
  96.             line-height: 18px;
  97.             font-weight: bold;
  98.             font-size: 14px;
  99.             text-align: center;
  100.         }
  101.  
  102.         .customoverlay td {
  103.             min-height: 14px;
  104.             line-height: 14px;
  105.             font-size: 12px;
  106.             text-align: center;
  107.         }
  108.  
  109.         .infowindow {
  110.             background-image: url("/content/baidu/infowindowbj.png");
  111.             background-repeat: no-repeat;
  112.             background-position: center;
  113.             width: 300px;
  114.             height: 142px;
  115.             margin: 0px 4px;
  116.             padding: 4px;
  117.         }
  118.  
  119.         .infoTitle {
  120.             font-size: 18px;
  121.             font-weight: bolder;
  122.         }
  123.  
  124.         .infowindow td {
  125.             vertical-align: top;
  126.         }
  127.     </style>
  128.     <script type="text/javascript">
  129.         wx.config({
  130.             debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  131.             appId: 'wxbbf496a1ed712716', // 必填，公众号的唯一标识
  132.             timestamp: '1508473423', // 必填，生成签名的时间戳
  133.             nonceStr: '98F13708210194C475687BE6106A3B84', // 必填，生成签名的随机串
  134.             signature: 'e4dabfa5c5553ee67be88441b87a4b4f87af59fb',// 必填，签名
  135.             jsApiList: [
  136.                 // 所有要调用的 API 都要加到这个列表中
  137.                 'checkJsApi',
  138.                 'onMenuShareTimeline',
  139.                 'onMenuShareAppMessage'
  140.             ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2。详见：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
  141.         });
  142.         wx.error(function (res) {
  143.             console.log(res);
  144.         });
  145.         wx.ready(function () {
  146.             // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  147.             var imgUrls = 'http://www.ihuo6.com/Images/V3/logo.png';
  148.             var link = 'http://www.ihuo6.com' + '/hotel/HotPlaceByMapTest';
  149.             wx.onMenuShareTimeline({
  150.                 title: '【斑斓·家】西安服务式酒店公寓地段', // 分享标题
  151.                 link: link, // 分享链接
  152.                 imgUrl: imgUrls, // 分享图标
  153.                 success: function () {
  154.                     // 用户确认分享后执行的回调函数
  155.                     //alert('转发成功！');
  156.                 },
  157.                 cancel: function () {
  158.                     // 用户取消分享后执行的回调函数
  159.                     //alert('转发失败！');
  160.                 }
  161.             });
  162.             wx.onMenuShareAppMessage({
  163.                 title: '【斑斓·家】西安服务式酒店公寓地段', // 分享标题
  164.                 desc: '曲江雁塔店、钟楼南门店、高新店更多精彩房型陆续开通中……', // 分享描述
  165.                 link: link, // 分享链接
  166.                 imgUrl: imgUrls, // 分享图标
  167.                 success: function () {
  168.                     // 用户确认分享后执行的回调函数
  169.                     //alert('转发成功！');
  170.                 },
  171.                 cancel: function () {
  172.                     // 用户取消分享后执行的回调函数
  173.                     //alert('转发失败！');
  174.                 }
  175.             });
  176.         });
  177.  
  178.  
  179.         // 限定缩放级别
  180.         var mapOptions = {
  181.             'minZoom': 12,
  182.             'maxZoom': 18
  183.         };
  184.         var map = new BMap.Map("allmap", mapOptions); // 创建Map实例
  185.         map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })); //添加地图类型控件
  186.         map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM, offset: new BMap.Size(5, 5) }));
  187.  
  188.         var imgurl = "/Images/HotPlace/overlaybig.png";
  189.  
  190.         var myGeo = new BMap.Geocoder();
  191.         var points = new Array();
  192.  
  193.         // 当前城市
  194.         var city = '西安市';
  195.         // 标注
  196.         var mapData = ['34.2218208200039|108.967331106256,30,曲江雁塔店,曲江雁塔店.png,慈恩西路,大雁塔','34.2554845576708|108.96625890407,53,钟楼南门店,钟楼南门店.png,,钟楼南门店','34.2308766900118|108.902508785079,30,高新店,高新店.png,号陕西省西安市雁塔区科技二路,高新店'];
  197.         var infoBoxTemp = null;
  198.         $(function () {
  199.             $("#allmap").css("height", ($(window).height()) + "px");
  200.             // map.centerAndZoom(poin, 14); // 初始化地图,城市名设置中心点
  201.             if (city == "上海市") {
  202.                 map.centerAndZoom("上海市", 14);
  203.             } else if (city == "西安市") {
  204.                 map.centerAndZoom("西安市", 13);
  205.             } else if (city == "北京市") {
  206.                 map.centerAndZoom("北京市", 13);
  207.             } else if (city == "成都市") {
  208.                 map.centerAndZoom("成都市", 14);
  209.             } else if (city == "广州市") {
  210.                 map.centerAndZoom("广州市", 14);
  211.             } else {
  212.                 map.centerAndZoom(city);
  213.             }
  214.  
  215.             for (var i = 0; i < mapData.length; i++) {
  216.                 (function () {
  217.                     var content = "<table class='infowindow'>";
  218.                     content += "<tr>";
  219.                     content += "<td rowspan='4' style='width:106px;height:120px'><img src='/Images/HotPlace/100120/" + mapData[i].split(',')[3] + "' /></td>";
  220.                     content += "<td class='infoTitle'>" + mapData[i].split(',')[2] + "</td>";
  221.                     content += "</tr>";
  222.                     content += "<tr>";
  223.                     content += "<td>地址：" + mapData[i].split(',')[4] + "</td>";
  224.                     content += "</tr>";
  225.                     content += "<tr>";
  226.                     content += "<td>周边：" + mapData[i].split(',')[5] + "</td>";
  227.                     content += "</tr>";
  228.                     content += "<tr>";
  229.                     content += "<td><a href='http://map.baidu.com'>查看房源详情</a></td>";
  230.                     content += "</tr>";
  231.                     content += "</table>";
  232.  
  233.                     var opts = {
  234.                         //title: "查看房源详情",
  235.                         enableMessage: true,
  236.                     };
  237.                     //var infoBox = new BMap.InfoWindow(content, opts);
  238.                     //新建infobox容器
  239.                     var infoBox = new BMapLib.InfoBox(
  240.                         map,
  241.                         content,
  242.                         {
  243.                             boxStyle: { background: "transparent none repeat scroll 0% 0%", width: "308px", height: "123px" },
  244.                             offset: new BMap.Size(10, 18),//此处貌似只能调整y的偏移
  245.                             closeIconMargin: "4px 8px",
  246.                             closeIconUrl: "/Content/baidu/close.png",
  247.                             enableAutoPan: true
  248.                         }
  249.                     );
  250.  
  251.                     var pintx = mapData[i].split(',')[0].split('|')[1];
  252.                     var pinty = mapData[i].split(',')[0].split('|')[0];
  253.                     var point = new BMap.Point(pintx, pinty)
  254.                     points.push(point);
  255.  
  256.                     var markerContent = "<div class='overlaybackground'><table class='customoverlay'>";
  257.                     markerContent += "<thead>";
  258.                     markerContent += "<tr>";
  259.                     markerContent += "<th>";
  260.                     markerContent += mapData[i].split(',')[2];
  261.                     markerContent += "</th>";
  262.                     markerContent += "</tr>";
  263.                     markerContent += "</thead>";
  264.                     markerContent += "<tbody>";
  265.                     markerContent += "<tr>";
  266.                     markerContent += "<td>(" + mapData[i].split(',')[1] + "个房源)</td>";
  267.                     markerContent += "</tr>";
  268.                     markerContent += "</tbody>";
  269.                     markerContent += "</table></div>";
  270.  
  271.                     //新建富标注
  272.                     var richMarker = new BMapLib.RichMarker(
  273.                         markerContent,
  274.                         point,
  275.                         {
  276.                             "anchor": new BMap.Size(-150, 0),
  277.                             "enableDragging": false
  278.                         }
  279.                     );
  280.                     map.addOverlay(richMarker);
  281.  
  282.                     richMarker.addEventListener("onclick", function (e) {
  283.                         //map.openInfoWindow(infoBox, point);
  284.                         if (infoBoxTemp) {
  285.                             infoBoxTemp.close();
  286.                         }
  287.                         infoBoxTemp = infoBox;
  288.                         infoBox.open(richMarker.getPosition());
  289.  
  290.                     });
  291.                 })()
  292.             }
  293.  
  294.             //$("close").onclick = function () {
  295.             //    infoBox.close();
  296.             //}
  297.  
  298.            // document.getElementsByTagName('a')[0].addEventListener("touchstart", function (e) { alert(110) })
  299.  
  300.             $("img").one("error", function (e) {
  301.                 $(this).attr("src", "/Images/HotPlace/100120/default.png");
  302.             });
  303.  
  304.         });
  305.  
  306.         function setCenter() {
  307.             map.setViewport(points);
  308.         }
  309.         window.onresize = function () {
  310.             $("#allmap").css("height", ($(window).height()) + "px");
  311.         }
  312.  
  313.         window.setTimeout(setCenter, 1000);
  314.     </script>
  315. </body>
  316. </html>

 InfoBox.js的源码

/**
 * @fileoverview 百度地图的自定义信息窗口，对外开放。
 * 用户自定义信息窗口的各种样式。例如：border，margin，padding，color，background等
 * 主入口类是<a href="symbols/BMapLib.InfoBox.html">InfoBox</a>，
 * 基于Baidu Map API 1.2。
 *
 * @author Baidu Map Api Group
 * @version 1.2
 */
/**
 * @namespace BMap的所有library类均放在BMapLib命名空间下
 */
var BMapLib = window.BMapLib = BMapLib || {};
//常量，infoBox可以出现的位置，此版本只可实现上下两个方向。
var INFOBOX_AT_TOP = 1, INFOBOX_AT_RIGHT = 2, INFOBOX_AT_BOTTOM = 3, INFOBOX_AT_LEFT = 4;
(function () {
    //声明baidu包
    var T, baidu = T = baidu || { version: '1.5.0' };
    baidu.guid = '$BAIDU$';
    //以下方法为百度Tangram框架中的方法，请到http://tangram.baidu.com 查看文档
    (function () {
        window[baidu.guid] = window[baidu.guid] || {};

        baidu.lang = baidu.lang || {};
        baidu.lang.isString = function (source) {
            return '[object String]' == Object.prototype.toString.call(source);
        };
        baidu.lang.isFunction = function (source) {
            return '[object Function]' == Object.prototype.toString.call(source);
        };
        baidu.lang.Event = function (type, target) {
            this.type = type;
            this.returnValue = true;
            this.target = target || null;
            this.currentTarget = null;
        };


        baidu.object = baidu.object || {};
        baidu.extend =
        baidu.object.extend = function (target, source) {
            for (var p in source) {
                if (source.hasOwnProperty(p)) {
                    target[p] = source[p];
                }
            }

            return target;
        };
        baidu.event = baidu.event || {};
        baidu.event._listeners = baidu.event._listeners || [];
        baidu.dom = baidu.dom || {};

        baidu.dom._g = function (id) {
            if (baidu.lang.isString(id)) {
                return document.getElementById(id);
            }
            return id;
        };
        baidu._g = baidu.dom._g;
        baidu.event.on = function (element, type, listener) {
            type = type.replace(/^on/i, '');
            element = baidu.dom._g(element);
            var realListener = function (ev) {
                // 1. 这里不支持EventArgument,  原因是跨frame的事件挂载
                // 2. element是为了修正this
                listener.call(element, ev);
            },
                lis = baidu.event._listeners,
                filter = baidu.event._eventFilter,
                afterFilter,
                realType = type;
            type = type.toLowerCase();
            // filter过滤
            if (filter && filter[type]) {
                afterFilter = filter[type](element, type, realListener);
                realType = afterFilter.type;
                realListener = afterFilter.listener;
            }

            // 事件监听器挂载
            if (element.addEventListener) {
                element.addEventListener(realType, realListener, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + realType, realListener);
            }
            // 将监听器存储到数组中
            lis[lis.length] = [element, type, listener, realListener, realType];
            return element;
        };

        baidu.on = baidu.event.on;
        baidu.event.un = function (element, type, listener) {
            element = baidu.dom._g(element);
            type = type.replace(/^on/i, '').toLowerCase();

            var lis = baidu.event._listeners,
                len = lis.length,
                isRemoveAll = !listener,
                item,
                realType, realListener;
            while (len--) {
                item = lis[len];

                if (item[1] === type
                    && item[0] === element
                    && (isRemoveAll || item[2] === listener)) {
                    realType = item[4];
                    realListener = item[3];
                    if (element.removeEventListener) {
                        element.removeEventListener(realType, realListener, false);
                    } else if (element.detachEvent) {
                        element.detachEvent('on' + realType, realListener);
                    }
                    lis.splice(len, 1);
                }
            }

            return element;
        };
        baidu.un = baidu.event.un;
        baidu.dom.g = function (id) {
            if ('string' == typeof id || id instanceof String) {
                return document.getElementById(id);
            } else if (id && id.nodeName && (id.nodeType == 1 || id.nodeType == 9)) {
                return id;
            }
            return null;
        };
        baidu.g = baidu.G = baidu.dom.g;
        baidu.dom._styleFixer = baidu.dom._styleFixer || {};
        baidu.dom._styleFilter = baidu.dom._styleFilter || [];
        baidu.dom._styleFilter.filter = function (key, value, method) {
            for (var i = 0, filters = baidu.dom._styleFilter, filter; filter = filters[i]; i++) {
                if (filter = filter[method]) {
                    value = filter(key, value);
                }
            }
            return value;
        };
        baidu.string = baidu.string || {};

        baidu.string.toCamelCase = function (source) {
            //提前判断，提高getStyle等的效率 thanks xianwei
            if (source.indexOf('-') < 0 && source.indexOf('_') < 0) {
                return source;
            }
            return source.replace(/[-_][^-_]/g, function (match) {
                return match.charAt(1).toUpperCase();
            });
        };

        baidu.dom.setStyle = function (element, key, value) {
            var dom = baidu.dom, fixer;

            // 放弃了对firefox 0.9的opacity的支持
            element = dom.g(element);
            key = baidu.string.toCamelCase(key);

            if (fixer = dom._styleFilter) {
                value = fixer.filter(key, value, 'set');
            }

            fixer = dom._styleFixer[key];
            (fixer && fixer.set) ? fixer.set(element, value) : (element.style[fixer || key] = value);

            return element;
        };

        baidu.setStyle = baidu.dom.setStyle;

        baidu.dom.setStyles = function (element, styles) {
            element = baidu.dom.g(element);
            for (var key in styles) {
                baidu.dom.setStyle(element, key, styles[key]);
            }
            return element;
        };
        baidu.setStyles = baidu.dom.setStyles;
        baidu.browser = baidu.browser || {};
        baidu.browser.ie = baidu.ie = /msie (\d+\.\d+)/i.test(navigator.userAgent) ? (document.documentMode || +RegExp['\x241']) : undefined;
        baidu.dom._NAME_ATTRS = (function () {
            var result = {
                'cellpadding': 'cellPadding',
                'cellspacing': 'cellSpacing',
                'colspan': 'colSpan',
                'rowspan': 'rowSpan',
                'valign': 'vAlign',
                'usemap': 'useMap',
                'frameborder': 'frameBorder'
            };

            if (baidu.browser.ie < 8) {
                result['for'] = 'htmlFor';
                result['class'] = 'className';
            } else {
                result['htmlFor'] = 'for';
                result['className'] = 'class';
            }

            return result;
        })();
        baidu.dom.setAttr = function (element, key, value) {
            element = baidu.dom.g(element);
            if ('style' == key) {
                element.style.cssText = value;
            } else {
                key = baidu.dom._NAME_ATTRS[key] || key;
                element.setAttribute(key, value);
            }
            return element;
        };
        baidu.setAttr = baidu.dom.setAttr;
        baidu.dom.setAttrs = function (element, attributes) {
            element = baidu.dom.g(element);
            for (var key in attributes) {
                baidu.dom.setAttr(element, key, attributes[key]);
            }
            return element;
        };
        baidu.setAttrs = baidu.dom.setAttrs;
        baidu.dom.create = function (tagName, opt_attributes) {
            var el = document.createElement(tagName),
                attributes = opt_attributes || {};
            return baidu.dom.setAttrs(el, attributes);
        };
        T.undope = true;
    })();

    /**
     * @exports InfoBox as BMapLib.InfoBox
     */

    var InfoBox =
    /**
     * InfoBox类的构造函数
     * @class InfoBox <b>入口</b>。
     * 可以自定义border,margin,padding,关闭按钮等等。
     * @constructor
         * @param {Map} map Baidu map的实例对象.
         * @param {String} content infoBox中的内容.
         * @param {Json Object} opts 可选的输入参数，非必填项。可输入选项包括：<br />
         * {<br />"<b>offset</b>" : {Size} infoBox的偏移量
         * <br />"<b>boxClass</b>" : {String} 定义infoBox的class,
         * <br />"<b>boxStyle</b>" : {Json} 定义infoBox的style,此项会覆盖boxClass<br />
         * <br />"<b>closeIconMargin</b>" : {String} 关闭按钮的margin    <br />
         * <br />"<b>closeIconUrl</b>" : {String} 关闭按钮的url地址    <br />
         * <br />"<b>enableAutoPan</b>" : {Boolean} 是否启动自动平移功能    <br />
         * <br />"<b>align</b>" : {Number} 基于哪个位置进行定位，取值为[INFOBOX_AT_TOP,INFOBOX_AT_BOTTOM]<br />
         * }<br />.
         * @example <b>参考示例：</b><br />
         * var infoBox = new BMapLib.InfoBox(map,"百度地图api",{boxStyle:{background:"url('tipbox.gif') no-repeat
          center top",width: "200px"},closeIconMargin: "10px 2px 0 0",enableAutoPan: true
          ,alignBottom: false});
     */
        BMapLib.InfoBox = function (map, content, opts) {

            this._content = content || "";
            this._isOpen = false;
            this._map = map;

            this._opts = opts = opts || {};
            this._opts.offset = opts.offset || new BMap.Size(0, 0);
            this._opts.boxClass = opts.boxClass || "infoBox";
            this._opts.boxStyle = opts.boxStyle || {};
            this._opts.closeIconMargin = opts.closeIconMargin || "2px";
            this._opts.closeIconUrl = opts.closeIconUrl || "close.png";
            this._opts.enableAutoPan = opts.enableAutoPan ? true : false;
            this._opts.align = opts.align || INFOBOX_AT_TOP;
        }
    InfoBox.prototype = new BMap.Overlay();
    InfoBox.prototype.initialize = function (map) {
        var me = this;
        var div = this._div = baidu.dom.create('div', { "class": this._opts.boxClass });
        baidu.dom.setStyles(div, this._opts.boxStyle);
        //设置position为absolute，用于定位
        div.style.position = "absolute";
        this._setContent(this._content);

        var floatPane = map.getPanes().floatPane;
        floatPane.style.width = "auto";
        floatPane.appendChild(div);
        //设置完内容后，获取div的宽度,高度
        this._getInfoBoxSize();
        //this._boxWidth = parseInt(this._div.offsetWidth,10);
        //this._boxHeight = parseInt(this._div.offsetHeight,10);
        //阻止各种冒泡事件
        baidu.event.on(div, "onmousedown", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "onmouseover", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "click", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "dblclick", function (e) {
            me._stopBubble(e);
        });
        // 手机端阻止冒泡
        baidu.event.on(div, "touchstart", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "touchend", function (e) {
            me._stopBubble(e);
        });
        baidu.event.on(div, "touch", function (e) {
            me._stopBubble(e);
        });

        return div;
    }
    InfoBox.prototype.draw = function () {
        this._isOpen && this._adjustPosition(this._point);
    }
    /**
     * 打开infoBox
     * @param {Marker|Point} anchor 要在哪个marker或者point上打开infobox
     * @return none
     *
     * @example <b>参考示例：</b><br />
     * infoBox.open();
     */
    InfoBox.prototype.open = function (anchor) {
        var me = this, poi;
        if (!this._isOpen) {
            this._map.addOverlay(this);
            this._isOpen = true;
            //延迟10ms派发open事件，使后绑定的事件可以触发。
            setTimeout(function () {
                me._dispatchEvent(me, "open", { "point": me._point });
            }, 10);
        }
        if (anchor instanceof BMap.Point) {
            poi = anchor;
            //清除之前存在的marker事件绑定，如果存在的话
            this._removeMarkerEvt();
        } else if (anchor instanceof BMap.Marker) {
            //如果当前marker不为空，说明是第二个marker，或者第二次点open按钮,先移除掉之前绑定的事件
            if (this._marker) {
                this._removeMarkerEvt();
            }
            poi = anchor.getPosition();
            this._marker = anchor;
            !this._markerDragend && this._marker.addEventListener("dragend", this._markerDragend = function (e) {
                me._point = e.point;
                me._adjustPosition(me._point);
                me._panBox();
                me.show();
            });
            //给marker绑定dragging事件，拖动marker的时候，infoBox也跟随移动
            !this._markerDragging && this._marker.addEventListener("dragging", this._markerDragging = function () {
                me.hide();
                me._point = me._marker.getPosition();
                me._adjustPosition(me._point);
            });
        }
        //打开的时候，将infowindow显示
        this.show();
        this._point = poi;
        this._panBox();
        this._adjustPosition(this._point);
    }
    /**
     * 关闭infoBox
     * @return none
     *
     * @example <b>参考示例：</b><br />
     * infoBox.close();
     */
    InfoBox.prototype.close = function () {
        if (this._isOpen) {
            this._map.removeOverlay(this);
            this._remove();
            this._isOpen = false;
            this._dispatchEvent(this, "close", { "point": this._point });
        }
    }

    /**
        * 打开infoBox时，派发事件的接口
     * @name InfoBox#Open
     * @event
     * @param {Event Object} e 回调函数会返回event参数，包括以下返回值：
     * <br />{"<b>target</b> : {BMap.Overlay} 触发事件的元素,
     * <br />"<b>type</b>：{String} 事件类型,
     * <br />"<b>point</b>：{Point} infoBox的打开位置}
     *
     * @example <b>参考示例：</b>
     * infoBox.addEventListener("open", function(e) {
     *     alert(e.type);
     * });
     */
    /**
      * 关闭infoBox时，派发事件的接口
      * @name InfoBox#Close
      * @event
      * @param {Event Object} e 回调函数会返回event参数，包括以下返回值：
      * <br />{"<b>target</b> : {BMap.Overlay} 触发事件的元素,
      * <br />"<b>type</b>：{String} 事件类型,
      * <br />"<b>point</b>：{Point} infoBox的关闭位置}
      *
      * @example <b>参考示例：</b>
      * infoBox.addEventListener("close", function(e) {
      *     alert(e.type);
      * });
      */
    /**
       * 启用自动平移
       * @return none
       *
       * @example <b>参考示例：</b><br />
       * infoBox.enableAutoPan();
       */
    InfoBox.prototype.enableAutoPan = function () {
        this._opts.enableAutoPan = true;
    }
    /**
     * 禁用自动平移
     * @return none
     *
     * @example <b>参考示例：</b><br />
     * infoBox.disableAutoPan();
     */
    InfoBox.prototype.disableAutoPan = function () {
        this._opts.enableAutoPan = false;
    }
    /**
     * 设置infoBox的内容
     * @param {String|HTMLElement} content 弹出气泡中的内容
     * @return none
     *
     * @example <b>参考示例：</b><br />
     * infoBox.setContent("百度地图API");
     */
    InfoBox.prototype.setContent = function (content) {
        this._setContent(content);
        this._getInfoBoxSize();
        this._adjustPosition(this._point);
    }
    /**
     * 设置信息窗的地理位置
     * @param {Point} point 设置position
     * @return none
     *
     * @example <b>参考示例：</b><br />
     * infoBox.setPosition(new BMap.Point(116.35,39.911));
     */
    InfoBox.prototype.setPosition = function (poi) {
        this._point = poi;
        this._adjustPosition(poi);
        this._removeMarkerEvt();
    }
    /**
     * 获得信息窗的地理位置
     * @param none
     * @return {Point} 信息窗的地理坐标
     *
     * @example <b>参考示例：</b><br />
     * infoBox.getPosition();
     */
    InfoBox.prototype.getPosition = function () {
        return this._point;
    }
    /**
     * 返回信息窗口的箭头距离信息窗口在地图
     * 上所锚定的地理坐标点的像素偏移量。
     * @return {Size} Size
     *
     * @example <b>参考示例：</b><br />
     * infoBox.getOffset();
     */
    InfoBox.prototype.getOffset = function () {
        return this._opts.offset;
    },
    /**
        *@ignore
     * 删除overlay，调用Map.removeOverlay时将调用此方法，
     * 将移除覆盖物的容器元素
     */
    InfoBox.prototype._remove = function () {
        var me = this;
        if (this.domElement && this.domElement.parentNode) {
            //防止内存泄露
            baidu.event.un(this._div.firstChild, "click", me._closeHandler());
            this.domElement.parentNode.removeChild(this.domElement);
        }
        this.domElement = null;
        this._isOpen = false;
        this.dispatchEvent("onremove");
    },
    baidu.object.extend(InfoBox.prototype, {
        /**
         * 获取关闭按钮的html
         * @return IMG 关闭按钮的HTML代码
         */
        _getCloseIcon: function () {
            var img = "<img src='" + this._opts.closeIconUrl + "' align='right' style='position:absolute;right:0px;cursor:pointer;margin:" + this._opts.closeIconMargin + "'/>";
            return img;
        },
        /**
         * 设置infoBox的内容
         * @param {String|HTMLElement} content 弹出气泡中的内容
         * @return none
         *
         * @example <b>参考示例：</b><br />
         * infoBox.setContent("百度地图API");
         */
        _setContent: function (content) {
            if (!this._div) {
                return;
            }
            var closeHtml = this._getCloseIcon();
            //string类型的content
            if (typeof content.nodeType === "undefined") {
                this._div.innerHTML = closeHtml + content;
            } else {
                this._div.innerHTML = closeHtml;
                this._div.appendChild(content);
            }
            this._content = content;
            //添加click关闭infobox事件
            this._addEventToClose();

        },
        /**
         * 调整infobox的position
         * @return none
         */
        _adjustPosition: function (poi) {
            var pixel = this._getPointPosition(poi);
            var icon = this._marker && this._marker.getIcon();
            switch (this._opts.align) {
                case INFOBOX_AT_TOP:
                    if (this._marker) {
                        this._div.style.bottom = -(pixel.y - this._opts.offset.height - icon.anchor.height + icon.infoWindowAnchor.height) - this._marker.getOffset().height + 2 + "px";
                    } else {
                        this._div.style.bottom = -(pixel.y - this._opts.offset.height) + "px";
                    }
                    break;
                case INFOBOX_AT_BOTTOM:
                    if (this._marker) {
                        this._div.style.top = pixel.y + this._opts.offset.height - icon.anchor.height + icon.infoWindowAnchor.height + this._marker.getOffset().height + "px";
                    } else {
                        this._div.style.top = pixel.y + this._opts.offset.height + "px";
                    }
                    break;
            }

            if (this._marker) {
                this._div.style.left = pixel.x - icon.anchor.width + this._marker.getOffset().width + icon.infoWindowAnchor.width - this._boxWidth / 2 + "px";
            } else {
                this._div.style.left = pixel.x - this._boxWidth / 2 + "px";
            }
        },
        /**
         * 得到infobox的position
         * @return Point  infobox当前的position
         */
        _getPointPosition: function (poi) {
            this._pointPosition = this._map.pointToOverlayPixel(poi);
            return this._pointPosition;
        },
        /**
         * 得到infobox的高度跟宽度
         * @return none
         */
        _getInfoBoxSize: function () {
            this._boxWidth = parseInt(this._div.offsetWidth, 10);
            this._boxHeight = parseInt(this._div.offsetHeight, 10);
        },
        /**
         * 添加关闭事件
         * @return none
         */
        _addEventToClose: function () {
            var me = this;
            baidu.event.on(this._div.firstChild, "click", me._closeHandler());
            this._hasBindEventClose = true;
        },
        /**
         * 处理关闭事件
         * @return none
         */
        _closeHandler: function () {
            var me = this;
            return function (e) {
                me.close();
            }
        },
        /**
         * 阻止事件冒泡
         * @return none
         */
        _stopBubble: function (e) {
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        },
        /**
         * 自动平移infobox，使其在视野中全部显示
         * @return none
         */
        _panBox: function () {
            if (!this._opts.enableAutoPan) {
                return;
            }
            var mapH = parseInt(this._map.getContainer().offsetHeight, 10),
                mapW = parseInt(this._map.getContainer().offsetWidth, 10),
                boxH = this._boxHeight,
                boxW = this._boxWidth;
            //infobox窗口本身的宽度或者高度超过map container
            if (boxH >= mapH || boxW >= mapW) {
                return;
            }
            //如果point不在可视区域内
            if (!this._map.getBounds().containsPoint(this._point)) {
                this._map.setCenter(this._point);
            }
            var anchorPos = this._map.pointToPixel(this._point),
                panTop, panBottom, panY,
                //左侧超出
                panLeft = boxW / 2 - anchorPos.x,
                //右侧超出
                panRight = boxW / 2 + anchorPos.x - mapW;
            if (this._marker) {
                var icon = this._marker.getIcon();
            }
            //基于bottom定位，也就是infoBox在上方的情况
            switch (this._opts.align) {
                case INFOBOX_AT_TOP:
                    //上侧超出
                    var h = this._marker ? icon.anchor.height + this._marker.getOffset().height - icon.infoWindowAnchor.height : 0;
                    panTop = boxH - anchorPos.y + this._opts.offset.height + h + 2;
                    break;
                case INFOBOX_AT_BOTTOM:
                    //下侧超出
                    var h = this._marker ? -icon.anchor.height + icon.infoWindowAnchor.height + this._marker.getOffset().height + this._opts.offset.height : 0;
                    panBottom = boxH + anchorPos.y - mapH + h + 4;
                    break;
            }

            panX = panLeft > 0 ? panLeft : (panRight > 0 ? -panRight : 0);
            panY = panTop > 0 ? panTop : (panBottom > 0 ? -panBottom : 0);
            this._map.panBy(panX, panY);
        },
        _removeMarkerEvt: function () {
            this._markerDragend && this._marker.removeEventListener("dragend", this._markerDragend);
            this._markerDragging && this._marker.removeEventListener("dragging", this._markerDragging);
            this._markerDragend = this._markerDragging = null;
        },
        /**
         * 集中派发事件函数
         *
         * @private
         * @param {Object} instance 派发事件的实例
         * @param {String} type 派发的事件名
         * @param {Json} opts 派发事件里添加的参数，可选
         */
        _dispatchEvent: function (instance, type, opts) {
            type.indexOf("on") != 0 && (type = "on" + type);
            var event = new baidu.lang.Event(type);
            if (!!opts) {
                for (var p in opts) {
                    event[p] = opts[p];
                }
            }
            instance.dispatchEvent(event);
        }
    });
})();

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/109662
推荐阅读