百度地图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
源码分享：
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edgechrome=1">
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/swiper.min.css">
<title>【斑斓·家】西安服务式酒店公寓地段</title>
</head>
<body>
<div class="map" id="allmap" style="width: 100%; font-size: 12px; padding: 0 0px; margin: 0 auto;">
</div>
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/datepicker/js/jquery.cookie.js"></script>
<script src="/datepicker/js/jquery.cookie.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=e5mycIBbzN1Y2tcat74nacHQTsVbvPoh"></script> <script src="/Content/baidu/InfoBox.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/RichMarker/1.2/src/RichMarker_min.js "></script>
<style type="text/css">
/*地图标题*/
.anchorBL {
display: none;
}
.BMap_bubble_title {
color: black;
font-size: 13px;
font-weight: bold;
text-align: left;
} .BMap_pop div:nth-child(1) {
border-radius: 7px 0 0 0;
} .BMap_pop div:nth-child(3) {
border-radius: 0 7px 0 0;
background: #ABABAB;
/*background: #ABABAB;*/
width: 23px;
width: 0px;
height: 0px;
} .BMap_pop div:nth-child(3) div {
border-radius: 7px;
} .BMap_pop div:nth-child(5) {
border-radius: 0 0 0 7px;
} .BMap_pop div:nth-child(5) div {
border-radius: 7px;
} .BMap_pop div:nth-child(7) {
border-radius: 0 0 7px 0;
} .BMap_pop div:nth-child div(7) {
border-radius: 7px;
} table.customoverlay {
margin: 20px auto 0px auto;
} .overlaybackground {
background-image: url("/Images/HotPlace/overlaybig.png");
background-repeat: no-repeat;
background-position: center;
width: 98px;
height: 121px;
position: absolute;
color: white;
white-space: normal;
line-height: 10px;
text-align: center;
font-size: 14px;
} .customoverlay th {
height: 40px;
min-height: 18px;
line-height: 18px;
font-weight: bold;
font-size: 14px;
text-align: center;
} .customoverlay td {
min-height: 14px;
line-height: 14px;
font-size: 12px;
text-align: center;
} .infowindow {
background-image: url("/content/baidu/infowindowbj.png");
background-repeat: no-repeat;
background-position: center;
width: 300px;
height: 142px;
margin: 0px 4px;
padding: 4px;
} .infoTitle {
font-size: 18px;
font-weight: bolder;
} .infowindow td {
vertical-align: top;
}
</style>
<script type="text/javascript">
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wxbbf496a1ed712716', // 必填，公众号的唯一标识
timestamp: '1508473423', // 必填，生成签名的时间戳
nonceStr: '98F13708210194C475687BE6106A3B84', // 必填，生成签名的随机串
signature: 'e4dabfa5c5553ee67be88441b87a4b4f87af59fb',// 必填，签名
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2。详见：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
});
wx.error(function (res) {
console.log(res);
});
wx.ready(function () {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
var imgUrls = 'http://www.ihuo6.com/Images/V3/logo.png';
var link = 'http://www.ihuo6.com' + '/hotel/HotPlaceByMapTest';
wx.onMenuShareTimeline({
title: '【斑斓·家】西安服务式酒店公寓地段', // 分享标题
link: link, // 分享链接
imgUrl: imgUrls, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
//alert('转发成功！');
},
cancel: function () {
// 用户取消分享后执行的回调函数
//alert('转发失败！');
}
});
wx.onMenuShareAppMessage({
title: '【斑斓·家】西安服务式酒店公寓地段', // 分享标题
desc: '曲江雁塔店、钟楼南门店、高新店更多精彩房型陆续开通中……', // 分享描述
link: link, // 分享链接
imgUrl: imgUrls, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
//alert('转发成功！');
},
cancel: function () {
// 用户取消分享后执行的回调函数
//alert('转发失败！');
}
});
}); // 限定缩放级别
var mapOptions = {
'minZoom': 12,
'maxZoom': 18
};
var map = new BMap.Map("allmap", mapOptions); // 创建Map实例
map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })); //添加地图类型控件
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM, offset: new BMap.Size(5, 5) })); var imgurl = "/Images/HotPlace/overlaybig.png"; var myGeo = new BMap.Geocoder();
var points = new Array(); // 当前城市
var city = '西安市';
// 标注
var mapData = ['34.2218208200039|108.967331106256,30,曲江雁塔店,曲江雁塔店.png,慈恩西路,大雁塔','34.2554845576708|108.96625890407,53,钟楼南门店,钟楼南门店.png,,钟楼南门店','34.2308766900118|108.902508785079,30,高新店,高新店.png,号陕西省西安市雁塔区科技二路,高新店'];
var infoBoxTemp = null;
$(function () {
$("#allmap").css("height", ($(window).height()) + "px");
// map.centerAndZoom(poin, 14); // 初始化地图,城市名设置中心点
if (city == "上海市") {
map.centerAndZoom("上海市", 14);
} else if (city == "西安市") {
map.centerAndZoom("西安市", 13);
} else if (city == "北京市") {
map.centerAndZoom("北京市", 13);
} else if (city == "成都市") {
map.centerAndZoom("成都市", 14);
} else if (city == "广州市") {
map.centerAndZoom("广州市", 14);
} else {
map.centerAndZoom(city);
} for (var i = 0; i < mapData.length; i++) {
(function () {
var content = "<table class='infowindow'>";
content += "<tr>";
content += "<td rowspan='4' style='width:106px;height:120px'><img src='/Images/HotPlace/100120/" + mapData[i].split(',')[3] + "' /></td>";
content += "<td class='infoTitle'>" + mapData[i].split(',')[2] + "</td>";
content += "</tr>";
content += "<tr>";
content += "<td>地址：" + mapData[i].split(',')[4] + "</td>";
content += "</tr>";
content += "<tr>";
content += "<td>周边：" + mapData[i].split(',')[5] + "</td>";
content += "</tr>";
content += "<tr>";
content += "<td><a href='http://map.baidu.com'>查看房源详情</a></td>";
content += "</tr>";
content += "</table>"; var opts = {
//title: "查看房源详情",
enableMessage: true,
};
//var infoBox = new BMap.InfoWindow(content, opts);
//新建infobox容器
var infoBox = new BMapLib.InfoBox(
map,
content,
{
boxStyle: { background: "transparent none repeat scroll 0% 0%", width: "308px", height: "123px" },
offset: new BMap.Size(10, 18),//此处貌似只能调整y的偏移
closeIconMargin: "4px 8px",
closeIconUrl: "/Content/baidu/close.png",
enableAutoPan: true
}
); var pintx = mapData[i].split(',')[0].split('|')[1];
var pinty = mapData[i].split(',')[0].split('|')[0];
var point = new BMap.Point(pintx, pinty)
points.push(point); var markerContent = "<div class='overlaybackground'><table class='customoverlay'>";
markerContent += "<thead>";
markerContent += "<tr>";
markerContent += "<th>";
markerContent += mapData[i].split(',')[2];
markerContent += "</th>";
markerContent += "</tr>";
markerContent += "</thead>";
markerContent += "<tbody>";
markerContent += "<tr>";
markerContent += "<td>(" + mapData[i].split(',')[1] + "个房源)</td>";
markerContent += "</tr>";
markerContent += "</tbody>";
markerContent += "</table></div>"; //新建富标注
var richMarker = new BMapLib.RichMarker(
markerContent,
point,
{
"anchor": new BMap.Size(-150, 0),
"enableDragging": false
}
);
map.addOverlay(richMarker); richMarker.addEventListener("onclick", function (e) {
//map.openInfoWindow(infoBox, point);
if (infoBoxTemp) {
infoBoxTemp.close();
}
infoBoxTemp = infoBox;
infoBox.open(richMarker.getPosition()); });
})()
} //$("close").onclick = function () {
// infoBox.close();
//} // document.getElementsByTagName('a')[0].addEventListener("touchstart", function (e) { alert(110) }) $("img").one("error", function (e) {
$(this).attr("src", "/Images/HotPlace/100120/default.png");
}); }); function setCenter() {
map.setViewport(points);
}
window.onresize = function () {
$("#allmap").css("height", ($(window).height()) + "px");
} window.setTimeout(setCenter, 1000);
</script>
</body>
</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);
}
});
})();
百度地图BMapLib.InfoBox 手机兼容源码修改的更多相关文章
- 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]
ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...
- 百度智能手环方案开源(含源码，原理图，APP，通信协议等)
分享一个百度智能手环开源项目的设计方案资料. 项目简介 百度云智能手环的开源方案是基于Apache2.0开源协议,开源内容包括硬件设计文档,原理图.ROM.通讯协议在内的全套方案,同时开放APP和云服 ...
- 【百度地图API】手机浏览器抓包工具及其使用方法
原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. -- ...
- Java学习-039-源码 jar 包的二次开发扩展实例（源码修改）
最近在使用已有的一些 jar 包时,发现有些 jar 包中的一些方法无法满足自己的一些需求,例如返回固定的格式,字符串处理等等,因而需要对原有 jar 文件中对应的 class 文件进行二次开发扩展, ...
- python的paramiko源码修改了一下，写了个操作命令的日志审计 bug修改
python的paramiko源码修改了一下,写了个操作命令的日志审计,但是记录的日志中也将backspace删除键记录成^H这个了,于是改了一下代码,用字符串的特性. 字符串具有列表的特性 > ...
- Android6.0 源码修改之 Contacts应用
一.Contacts应用的主界面和联系人详情界面增加顶部菜单添加退出按钮 通过Hierarchy View 工具可以发现 主界面对应的类为 PeopleActivity 联系人详情界面对应的类为 Qu ...
- Android6.0 源码修改之 仿IOS添加全屏可拖拽浮窗返回按钮
前言 之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP)/动态显示和隐藏NavigationBar 在某些特殊定制的版本中要求 ...
- Android6.0 源码修改之屏蔽系统短信功能和来电功能
一.屏蔽系统短信功能 1.屏蔽所有短信 android 4.2 短信发送流程分析可参考这篇 戳这 源码位置 vendor\mediatek\proprietary\packages\apps\Mms\ ...
- el-upload源码修改跳坑
之前给element-ui提了一个问题,结果没有鸟我,没办法,只能修改源码来满足需求了 (备注:element-ui2依然没有修改,为了迎合产品还是要改源码) 本文讨论的组件属性仅限于list-typ ...
随机推荐
- Jenkins部署Python项目实战
一.背景 我们工作中常用Jenkins部署Java代码,因其灵活的插件特性,例如jdk,maven,ant等使得java项目编译后上线部署一气呵成,同样对于脚本语言类型如Python上线部署,利用Je ...
- 安装tesserocr错误（未解决）
在win10下使用pip install tesserocr安装时,始终报错,未解决问题 解压tesserocr-2.2.2.tar.gz该文件夹后,查看setup.py文件,发现似乎model只能再 ...
- 软件工程第二次程序的作业：Java计算器实验
1.计算器实验报告 2.https://github.com/lollipopangel/test/tree/master 3.实验截图 7+8 清除 六.总结 通过本次实验让我对JFrame类.JP ...
- SE Springer小组之《Spring音乐播放器》需求分析说明书一
软件需求说明书 软件需求说明书的编制是为了使用户和软件开发者双方对该软件的初始规定有一个共同的理解, 使之成为整个开发工作的基础. 1 引言 1．1编写目的 使用户对该软件的初始规定有一个理解,也使软 ...
- Android 學習之旅!(1)
就這樣就過去了一年加一個學期,現在是大二第二個學期而且是下半學期了,以前都是無所事事,沒事睡睡覺,打打遊戲就過去了,但是想到家境和以後的路,我還是決心自己找點東西學習下,以後出去還能有一技之長(雖然可 ...
- String系列-----AbstractStringBuilder
1. AbstractStringBuilder是StringBuffer和StringBuilder的父类 package com.amazing.jdk.string_2017_12_31; im ...
- Java基础知识中的注意事项
设置Java的相关路径,举例: JAVA_HOME --> C:\Program Files\Java\jdk1.8.0_191 Path ---> C:\Program Fil ...
- PAT 1056 组合数的和
https://pintia.cn/problem-sets/994805260223102976/problems/994805271455449088 给定 N 个非 0 的个位数字,用其中任意 ...
- PAT 1004 成绩排名
https://pintia.cn/problem-sets/994805260223102976/problems/994805321640296448 读入n名学生的姓名.学号.成绩,分别输出成绩 ...
- git查看分支图
git log --graph --decorate --oneline --simplify-by-decoration --all