覆盖默认的dom结构

使用SimpleInfoWindow，本例展示如何覆盖默认的dom结构。

源代码编辑器
<!-- 重点： AMapUI.defineTpl("ui/overlay/SimpleInfoWindow/tpl/container.html" -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/overlay/SimpleInfoWindow/examples/custom-dom.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/overlay/SimpleInfoWindow/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>覆盖默认的dom结构</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    
    p.my-desc {
        margin: 5px 0;
        line-height: 150%;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <!-- 这里定义模板内容 -->
    <script id="my-infowin-tpl" type="text/template">
        <div class="amap-ui-smp-ifwn-container">
            <a class="amap-ui-infowindow-close amap-ui-smp-ifwn-def-tr-close">&#10006;</a>
            <div class="amap-ui-smp-ifwn-content-body" style="width:300px;">
                <h1><%= myCustomHeader %></h1>
                <h3 class="amap-ui-infowindow-title" style="width:100px;float:left"><%= infoTitle %></h3>
                <div class="amap-ui-infowindow-body" style="width:200px;height:60px; float:right;background:#eee; ">
                    <%= infoBody %>
                </div>
                <div style="clear:both"></div>
                <h4><%= myCustomFooter %></h4>
                <button class="amap-ui-infowindow-close" style="margin:0 auto; display:block; width:100px;">关闭</button>
            </div>
            <div class="amap-ui-smp-ifwn-combo-sharp"></div>
        </div>
    </script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });

    //覆盖默认的dom结构
    AMapUI.defineTpl("ui/overlay/SimpleInfoWindow/tpl/container.html", [], function() {
        return document.getElementById('my-infowin-tpl').innerHTML;
    });

    AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {

        var marker = new AMap.Marker({
            map: map,
            zIndex: 9999999,
            position: map.getCenter()
        });

        var infoWindow = new SimpleInfoWindow({
            myCustomHeader: '我的header',
            myCustomFooter: '我的footer',
            infoTitle: '<strong>这里是标题</strong>',
            infoBody: '<p class="my-desc"><strong>这里是内容。</strong></p>',

            //基点指向marker的头部位置
            offset: new AMap.Pixel(0, -31)
        });

        function openInfoWin() {
            infoWindow.open(map, marker.getPosition());
        }

        //marker 点击时打开
        marker.on('click', function() {
            openInfoWin();
        });

        openInfoWin();
    });
    </script>
</body>

</html>
控制台
清空
返回顶部示例中心常见问题智能客服