百度地图自定义inforWindows 移动端事件处理

作者: loycoder | 来源:发表于2018-06-22 17:49 被阅读195次

百度地图自定义inforWindows 移动端事件处理
移动端百度地图无法触发自定义覆盖物事件的问题
移动端调用手机电话功能以及百度地图
iOS Apps
地图瓦片制作
移动端事件
input输入框键盘弹起延时问题
移动端知识概括
移动端
移动端 FastClick

在做百度地图开发时，有一个需求需要自定义热点弹窗，当时使用的时官方开源库
自定义信息窗口

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>