在做百度地图开发时，有一个需求 需要自定义 热点弹窗， 当时使用的时 官方开源库
自定义信息窗口
PC端正常，不过在移动端出现问点击marker 出现弹窗后，弹窗内部的元素事件全部失效，不可触发， 会被地图默认的拖拽事件所拦截掉。
example：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<style type="text/css">
.infoBoxContent{font-size: 12px;} .infoBoxContent .title{height: 42px; width: 272px;} .infoBoxContent .title strong{font-size: 14px; line-height: 42px; padding: 0 10px 0 5px;} .infoBoxContent .title .price{color: #FFFF00;} .infoBoxContent .list{width: 268px; border: solid 1px #4FA5FC; border-top: none; background: #fff; height: 260px;} .infoBoxContent .list ul{margin: 0; padding: 5px; list-style: none;} .infoBoxContent .list ul li{float: left; width: 255px; border-bottom: solid 1px #4FA5FC; padding: 2px 0;} .infoBoxContent .list ul .last{border: none;} .infoBoxContent .list ul img{width: 53px; height: 42px; margin-right: 5px;} .infoBoxContent .list ul p{padding: 0; margin: 0;} .infoBoxContent .left{float: left;} .infoBoxContent .rmb{float: right; color: #EB6100; font-size: 14px; font-weight: bold;} .infoBoxContent a{color: #0041D9; text-decoration: none;}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Yil05mmmidi6TA4INkOwPr4LBxx9AH35"></script>
<script type="text/javascript" src="./InfoBox_min.js"></script>
<title>Creating and Using an InfoBox</title>
</head>
<body>
<script type="text/javascript" src="http://api.map.baidu.com/library/EventWrapper/1.2/src/EventWrapper.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<div id="map_canvas" style="width: 600px; height: 500px"></div>
<script type="text/javascript">
var map = new BMap.Map('map_canvas', {enableMapClick: false});
var poi = new BMap.Point(116.307852, 40.057031);
map.centerAndZoom(poi, 16);
var html = ["<div id='test' class='infoBoxContent'>",
"<div class='list'>"
, "<li class='last'><a class='go' href='baidu.com' class='left'>点击跳转</a> <a class='close'>关闭弹窗</a>" +
"</li>"
, "</ul></div>"
, "</div>"];
var infoBox = new BMapLib.InfoBox(map, html.join(""), {
boxStyle: {
width: "270px"
, height: "300px"
}
, closeIconMargin: "1px 1px 0 0"
, enableAutoPan: true
, align: INFOBOX_AT_TOP
});
console.log(infoBox);
var marker = new BMap.Marker(poi);
map.addOverlay(marker);
marker.enableDragging();
marker.addEventListener('click', function (e) {
infoBox.open(marker);
//防止dom元素未获取到，直接去绑定事件，所以延迟绑定
setTimeout(function () {
var dom = infoBox._map.De[0].V
//移动端需要用touch绑定
BMapLib.EventWrapper.addDomListener($(dom).find('a.go')[0], "touchend", function (e) {
console.log('链接点击');
});
BMapLib.EventWrapper.addDomListener($(dom).find('a.close')[0], "touchend", function (e) {
//事件处理
infoBox.close();
});
}, 1)
})
</script>
</body>
</html>
网友评论