事件监听

使用MarkerList的事件监听。

源代码编辑器
复制
运行
还原
          <!-- 重点参数：listElementEvents，markerEvents，infoWindowEvents -->
<!-- 重点代码：markerList.on('listElementClick listElementMouseenter..... -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/MarkerList/examples/listen-events.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>事件监听</title>
    <link rel="stylesheet" type="text/css" href="./common.css">
    <style>
    #eventInfo {
        position: absolute;
        z-index: 9999;
        right: 270px;
        top: 20px;
        background: #fff;
        border: 1px solid #ccc;
        padding: 7px;
        min-width: 100px;
        line-height: 170%;
    }
    
    .eventType {
        font-size: 120%;
        letter-spacing: 1px;
        color: red;
    }
    
    .my-svg-marker .amap-simple-marker-label {
        color: #fff;
        top: 10px;
        font-size: 20px;
    }
    </style>
</head>

<body>
    <div id="outer-box">
        <div id="eventInfo">事件信息</div>
        <div id="container">
        </div>
        <div id="panel">
            <div id="intro">
                <h3>事件监听</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/SvgMarker', 'overlay/SimpleInfoWindow'],
        function(MarkerList, SvgMarker, SimpleInfoWindow) {

            if (!SvgMarker.supportSvg) {
                //当前环境并不支持SVG，此时SvgMarker会回退到父类，即SimpleMarker
                alert('当前环境不支持SVG');
            }

            var markerList = new MarkerList({
                //关联的map对象
                map: map,

                //列表的dom容器的id
                listContainer: 'my-list',

                //需要监听的列表节点事件
                listElementEvents: ['click', 'mouseenter', 'mouseleave'],

                //需要监听的marker事件
                markerEvents: ['click', 'mouseover', 'mouseout'],

                //需要监听的infoWindow事件
                infoWindowEvents: ['click', 'mouseover', 'mouseout'],

                //返回数据项的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) {


                    var label = dataItem.id;

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

                    //返回一个新的Marker
                    return new SvgMarker(
                        new SvgMarker.Shape.SquarePin({
                            height: 60,
                            strokeWidth: 1,
                            strokeColor: '#ccc',
                            fillColor: 'green'
                        }), {
                            iconLabel: label,
                            containerClassNames: 'my-svg-marker',
                            showPositionPoint: true
                        })
                },
                //返回数据项对应的列表节点
                getListElement: function(dataItem, context, recycledListElement) {

                    var tpl = '<p><%- dataItem.id %>：<%- dataItem.desc %>';

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

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

                    //返回一段html，MarkerList将利用此html构建一个新的dom节点
                    return '<li>' + content + '</li>';
                },
                getInfoWindow: function(dataItem, context, recycledInfoWindow) {

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

                    //返回一个新的InfoWindow
                    return new SimpleInfoWindow({
                        offset: new AMap.Pixel(0, -57),
                        infoTitle: dataItem.id,
                        infoBody: dataItem.desc
                    });
                }

            });

            markerList.on('listElementClick listElementMouseenter listElementMouseleave ' +
                'markerClick markerMouseover markerMouseout ' +
                'infoWindowClick infoWindowMouseover infoWindowMouseout',
                function(event, record) {

                    var $ = MarkerList.utils.$,
                        template = MarkerList.utils.template;

                    $('#eventInfo').html(template('<%- record.id%>: <%- record.data.desc %>' +
                        '<div class="eventType"><%- event.type %></div>', {
                            event: event,
                            record: record
                        }));
                });

            //监听选中改变
            markerList.on('selectedChanged', function(event, info) {
                //console.log(event, info);
            });

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

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

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