百度地图自定义信息窗


效果

代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(360deg)
        }
    }

    @-moz-keyframes rotate {
        from {
            -moz-transform: rotate(0deg)
        }
        to {
            -moz-transform: rotate(360deg)
        }
    }

    @-ms-keyframes rotate {
        from {
            -ms-transform: rotate(0deg)
        }
        to {
            -ms-transform: rotate(360deg)
        }
    }

    @-o-keyframes rotate {
        from {
            -o-transform: rotate(0deg)
        }
        to {
            -o-transform: rotate(360deg)
        }
    }

    .closeR {
        animation: 9.5s linear 0s normal none infinite rotate;
        -webkit-animation: 9.5s linear 0s normal none infinite rotate;
    }

    .wflyout {
        width: 100%;
        height: 100%;
        font-size: 10px;
        background-color: white;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #c5c5c5;
        -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
        -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
        box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .wflyout .wtip {
        background-repeat: no-repeat;
        background-size: auto;
        height: 11px;
        position: absolute;
        top: -11px;
        left: 25px;
        width: 20px;
    }

    .wflyout h2 {
        text-transform: uppercase;
        text-align: center;
        color: #666;
        font-size: 2em;
        padding-bottom: 5px;
        margin-bottom: 12px;
        border-bottom: 1px solid #dcdbda;
    }

    .wflyout p {
        font-size: 1.1em;
        color: #222;
        text-indent: 2em;
    }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0"></script>
    <script type="text/javascript" src="lib/InfoBox.js"></script>
    <title>Creating and Using an InfoBox</title>
</head>

<body>
    <div id="map_canvas" style="width: 600px; height: 500px"></div>
    <button id="close">close</button>
    <button id="open">open</button>
    <button id="show">show</button>
    <button id="hide">hide</button>
    <button id="enableAutoPan">enableAutoPan</button>
    <button id="disableAutoPan">disableAutoPan</button>
    <script type="text/javascript">
    var map = new BMap.Map('map_canvas');
    var poi = new BMap.Point(116.307852, 40.057031);
    map.centerAndZoom(poi, 16);


    var sContent =
        "<div class='wflyout'><h2 style='margin:0 0 5px 0;padding:0.2em 0'>标题</h2>" +
        "<p style='margin:0;line-height:1.5;text-indent:2em'>内容</p>" +
        "</div>";

    var infoBox = new BMapLib.InfoBox(map, sContent, {
        boxStyle: {
            width: "270px",
            height: "300px"
        },
        closeIconUrl: 'close.png',
        closeIconMargin: "7.5px 2.5px 0 0",
        enableAutoPan: true,
        align: INFOBOX_AT_TOP
    });

    var marker = new BMap.Marker(poi);
    map.addOverlay(marker);
    infoBox.open(marker);
    marker.enableDragging();
    $("close").onclick = function() {
        infoBox.close();
    }
    $("open").onclick = function() {
        infoBox.open(marker);
    }
    $("show").onclick = function() {
        infoBox.show();
    }
    $("hide").onclick = function() {
        infoBox.hide();
    }
    $("enableAutoPan").onclick = function() {
        infoBox.enableAutoPan();
    }
    $("disableAutoPan").onclick = function() {
        infoBox.disableAutoPan();
    }

    function $(id) {
        return document.getElementById(id);
    }
    </script>
</body>

</html>

知识共享许可协议
《百度地图自定义信息窗》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告