事件处理

DistrictExplorer下的各类事件的处理方法。

源代码编辑器
复制
运行
还原
          <!-- 重点： on, setAreaNodesForLocating -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/events.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>事件处理</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    </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 type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        cursor: 'default',
        zoom: 4
    });

    //just some colors
    var colors = [
        "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
        "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
        "#651067", "#329262", "#5574a6", "#3b3eac"
    ];

    AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {

        //创建一个实例
        var districtExplorer = new DistrictExplorer({
            eventSupport: true,
            map: map
        });

        //创建一个辅助Marker，提示鼠标内容
        var tipMarker = new AMap.Marker({
            //启用冒泡，否则click事件会被marker自己拦截
            bubble: true
        });

        //监听feature的hover事件
        districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {

            var isHover = e.type === 'featureMouseover';

            if (!isHover) {
                tipMarker.setMap(null);
                return;
            }

            tipMarker.setMap(map);

            tipMarker.setPosition(e.originalEvent.lnglat);

            tipMarker.setLabel({
                offset: new AMap.Pixel(20, 20),
                content: feature.properties.name
            });

        });

        //监听鼠标在feature上滑动
        districtExplorer.on('featureMousemove', function(e, feature) {
            //更新提示位置
            tipMarker.setPosition(e.originalEvent.lnglat);
        });

        //feature被点击
        districtExplorer.on('featureClick', function(e, feature) {

            console.log('点击: ' + feature.properties.name);
        });

        //外部区域被点击
        districtExplorer.on('outsideClick', function(e) {

            console.log('区域外点击');
        });


        function renderAreaNode(areaNode) {

            if ([310000, 330100, 330200].indexOf(areaNode.getAdcode()) >= 0) {
                //绘制子区域
                districtExplorer.renderSubFeatures(areaNode, function(feature, i) {

                    var fillColor = colors[i % colors.length];
                    var strokeColor = colors[colors.length - 1 - i % colors.length];

                    return {
                        cursor: 'default',
                        bubble: true,
                        strokeColor: strokeColor, //线颜色
                        strokeOpacity: 1, //线透明度
                        strokeWeight: 1, //线宽
                        fillColor: fillColor, //填充色
                        fillOpacity: 0.35, //填充透明度
                    };
                });
            }

            //绘制父区域
            districtExplorer.renderParentFeature(areaNode, {
                cursor: 'default',
                bubble: true,
                strokeColor: 'black', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: 'gray', //填充色
                fillOpacity: 0.2, //填充透明度
            });
        }

        var adcodes = [
            310000, //上海
            330100, //杭州
            330200, //宁波
            330000 //浙江
        ];

        districtExplorer.loadMultiAreaNodes(adcodes, function(error, areaNodes) {

            //设置定位节点，支持鼠标位置识别
            //注意节点的顺序，前面的高优先级
            districtExplorer.setAreaNodesForLocating(areaNodes);

            //清除已有的绘制内容
            districtExplorer.clearFeaturePolygons();


            for (var i = 0, len = areaNodes.length; i < len; i++) {
                renderAreaNode(areaNodes[i]);
            }

            //更新地图视野
            map.setFitView(districtExplorer.getAllFeaturePolygons());
        });
    });
    </script>
</body>

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