SimpleMarker&SimpleWindow

使用MarkerList，组合使用SimpleMarker&SimpleWindow。

源代码编辑器
复制
运行
还原
          <!-- 重点参数：getMarker，getInfoWindow -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/MarkerList/examples/simple-marker-infowin.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/misc/MarkerList/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>SimpleMarker&SimpleWindow</title>
    <link rel="stylesheet" type="text/css" href="./common.css">
    <style>
    .my-marker .amap-simple-marker-label {
        color: #fff;
    }
    </style>
</head>

<body>
    <div id="outer-box">
        <div id="container">
        </div>
        <div id="panel">
            <div id="intro">
                <h3>SimpleMarker & SimpleWindow</h3>
            </div>
            <ul id="my-list"></ul>
        </div>
    </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 type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 9
    });
    
    AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'],
        function(MarkerList, SimpleMarker, SimpleInfoWindow) {

            var markerList = new MarkerList({
                //关联的map对象
                map: map,
                //列表的dom容器的id
                listContainer: 'my-list',

                //返回数据项的Id
                getDataId: function(dataItem, index) {
                    //index表示该数据项在数组中的索引位置，从0开始，如果确实没有id，可以返回index代替
                    return dataItem.id;
                },
                //返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
                getPosition: function(dataItem) {
                    return dataItem.position;
                },
                //返回数据项对应的Marker
                getMarker: function(dataItem, context, recycledMarker) {

                    //存在可回收利用的marker
                    if (recycledMarker) {
                        //直接更新内容返回
                        recycledMarker.setIconLabel(context.id);
                        recycledMarker.setIconStyle(dataItem.iconStyle);
                        return recycledMarker;
                    }

                    //返回一个新的Marker
                    return new SimpleMarker({
                        containerClassNames: 'my-marker',
                        iconStyle: dataItem.iconStyle,
                        iconLabel: context.id
                    });
                },
                //返回数据项对应的infoWindow
                getInfoWindow: function(dataItem, context, recycledInfoWindow) {

                    if (recycledInfoWindow) {
                        //存在可回收利用的infoWindow, 直接更新内容返回
                        recycledInfoWindow.setInfoTitle(dataItem.title);
                        recycledInfoWindow.setInfoBody(dataItem.desc);
                        return recycledInfoWindow;
                    }

                    //返回一个新的InfoWindow
                    return new SimpleInfoWindow({
                        offset: new AMap.Pixel(0, -37),
                        infoTitle: dataItem.title,
                        infoBody: dataItem.desc
                    });
                },
                getListElement: function(dataItem, context, recycledListElement) {

                    var tpl = '<button style="background-color:<%= dataItem.iconStyle %>">' +
                        '<%- dataId %></button> <%- dataItem.title %>';

                    var content = MarkerList.utils.template(tpl, {
                        dataItem: dataItem,
                        dataId: context.id
                    });

                    if (recycledListElement) {
                        //存在可回收利用的listElement, 直接更新内容返回
                        recycledListElement.innerHTML = content;
                        return recycledListElement;
                    }

                    //返回一段html，MarkerList将利用此html构建一个新的dom节点
                    return '<li>' + content + '</li>';
                }

            });

            //构建一个数据项数组，数据项本身没有格式要求，但需要支持下述的getDataId和getPosition
            var data = [{
                id: 'A',
                position: [116.020764, 39.904989],
                iconStyle: 'red',
                title: '标题_1',
                desc: '描述_1'
            }, {
                id: 'B',
                position: [116.405285, 39.904989],
                iconStyle: 'green',
                title: '标题_2',
                desc: '描述_2'
            }, {
                id: 'C',
                position: [116.789806, 39.904989],
                iconStyle: 'purple',
                title: '标题_3',
                desc: '描述_3'
            }];

            //展示该数据
            markerList.render(data);
        });
    </script>
</body>

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