高德地图行政区域划分（西安）

本来是支持地图下钻的，去掉注释代码即可

<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/index.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/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="./area.css">
</head>

<body>
    <div id="outer-box">
        <div id="container" tabindex="0"></div>
        <div id="panel" class="scrollbar1">
            <ul id="area-tree">
            </ul>
        </div>
    </div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map'container', {
       resizeEnable: true,
       rotateEnable:true,
       pitchEnable:true,
       zoom: 11.8,
       pitch:75,
       rotation:-15,
       viewMode:'3D',//开启3D视图,默认为关闭
       buildingAnimation:true,//楼块出现是否带动画
       expandZoomRange:true,
       zooms:[3,20],
       center:[108.907941,34.2463]  // 108.907941,34.2463
    });
    //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.load['ui/geo/DistrictExplorer', 'lib/$'], functionDistrictExplorer, $) {

        //创建一个实例
        var districtExplorer = window.districtExplorer = new DistrictExplorer{
            eventSupport: true, //打开事件支持
            map: map
        });

        //当前聚焦的区域
        var currentAreaNode = null;

        //鼠标hover提示内容
        var $tipMarkerContent = $'<div class="tipMarker top"></div>');

        var tipMarker = new AMap.Marker{
            content: $tipMarkerContent.get0),
            offset: new AMap.Pixel0, 0),
            bubble: true
        });

        //根据Hover状态设置相关样式
        function toggleHoverFeaturefeature, isHover, position) {

            tipMarker.setMapisHover ? map : null);

            if !feature) {
                return;
            }

            var props = feature.properties;

            if isHover) {

                //更新提示内容
                $tipMarkerContent.htmlprops.adcode + ': ' + props.name);
                //更新位置
                tipMarker.setPositionposition || props.center);
            }

            $'#area-tree').find'h2[data-adcode="' + props.adcode + '"]').toggleClass'hover', isHover);

            //更新相关多边形的样式
            var polys = districtExplorer.findFeaturePolygonsByAdcodeprops.adcode);
            for var i = 0, len = polys.length; i < len; i++) {

                polys[i].setOptions{
                    fillOpacity: isHover ? 0.5 : 0.2
                });
            }
        }

        //监听feature的hover事件
        districtExplorer.on'featureMouseout featureMouseover', functione, feature) {
            toggleHoverFeaturefeature, e.type === 'featureMouseover',
                e.originalEvent ? e.originalEvent.lnglat : null);
        });

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

        //feature被点击
        districtExplorer.on'featureClick', functione, feature) {
            debugger
            var props = feature.properties;

            //如果存在子节点
            if props.childrenNum > 0) {
                //切换聚焦区域
                switch2AreaNodeprops.adcode);
            }
        });

        //外部区域被点击
//         districtExplorer.on'outsideClick', functione) {
// 
//             districtExplorer.locatePositione.originalEvent.lnglat, functionerror, routeFeatures) {
// 
//                 if routeFeatures && routeFeatures.length > 1) {
//                     //切换到省级区域
//                     switch2AreaNoderouteFeatures[1].properties.adcode);
//                 } else {
//                     //切换到全国
//                     switch2AreaNode100000);
//                 }
// 
//             }, {
//                 levelLimit: 2
//             });
//         });

        //绘制区域面板的节点
        function renderAreaPanelNodeele, props, color) {

            var $box = $'<li/>').addClass'lv_' + props.level);

            var $h2 = $'<h2/>').addClass'lv_' + props.level).attr{
                'data-adcode': props.adcode,
                'data-level': props.level,
                'data-children-num': props.childrenNum || void0),
                'data-center': props.center.join',')
            }).htmlprops.name).appendTo$box);

            if color) {
                $h2.css'borderColor', color);
            }

            //如果存在子节点
            if props.childrenNum > 0) {

                //显示隐藏
                $'<div class="showHideBtn"></div>').appendTo$box);

                //子区域列表
                $'<ul/>').addClass'sublist lv_' + props.level).appendTo$box);

                $'<div class="clear"></div>').appendTo$box);

                if props.level !== 'country') {
                    $box.addClass'hide-sub');
                }
            }

            $box.appendToele);
        }


        //填充某个节点的子区域列表
        function renderAreaPanelareaNode) {

            var props = areaNode.getProps);

            var $subBox = $'#area-tree').find'h2[data-adcode="' + props.adcode + '"]').siblings'ul.sublist');

            if !$subBox.length) {
                //父节点不存在，先创建
                renderAreaPanelNode$'#area-tree'), props);
                $subBox = $'#area-tree').find'ul.sublist');
            }

            if $subBox.attr'data-loaded') === 'rendered') {
                return;
            }

            $subBox.attr'data-loaded', 'rendered');

            var subFeatures = areaNode.getSubFeatures);

            //填充子区域
            for var i = 0, len = subFeatures.length; i < len; i++) {
                renderAreaPanelNode$subBox, areaNode.getPropsOfFeaturesubFeatures[i]), colors[i % colors.length]);
            }
        }

        //绘制某个区域的边界
        function renderAreaPolygonsareaNode) {

            //更新地图视野
            map.setBoundsareaNode.getBounds), null, null, true);

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

            //绘制子区域
            
            districtExplorer.renderSubFeaturesareaNode, functionfeature, i) {

                var fillColor = colors[i % colors.length];
                var strokeColor = colors[colors.length - 1 - i % colors.length];
                debugger
                return {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: strokeColor, //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 3, //线宽
                    fillColor: fillColor, //填充色
                    fillOpacity: 0.2, //填充透明度
                };
            });

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

        //切换区域后刷新显示内容
        function refreshAreaNodeareaNode) {

            districtExplorer.setHoverFeaturenull);

            renderAreaPolygonsareaNode);

            //更新选中节点的class
            var $nodeEles = $'#area-tree').find'h2');

            $nodeEles.removeClass'selected');

            var $selectedNode = $nodeEles.filter'h2[data-adcode=' + areaNode.getAdcode) + ']').addClass'selected');

            //展开下层节点
            $selectedNode.closest'li').removeClass'hide-sub');

            //折叠下层的子节点
            $selectedNode.siblings'ul.sublist').children).addClass'hide-sub');
        }

        //切换区域
        function switch2AreaNodeadcode, callback) {

            if currentAreaNode && '' + currentAreaNode.getAdcode) === '' + adcode)) {
                return;
            }

            loadAreaNodeadcode, functionerror, areaNode) {

                if error) {

                    if callback) {
                        callbackerror);
                    }

                    return;
                }

                currentAreaNode = window.currentAreaNode = areaNode;

                //设置当前使用的定位用节点
                districtExplorer.setAreaNodesForLocating[currentAreaNode]);

                refreshAreaNodeareaNode);

                if callback) {
                    callbacknull, areaNode);
                }
            });
        }

        //加载区域
        function loadAreaNodeadcode, callback) {

            districtExplorer.loadAreaNodeadcode, functionerror, areaNode) {

                if error) {

                    if callback) {
                        callbackerror);
                    }

                    console.errorerror);

                    return;
                }

                renderAreaPanelareaNode);

                if callback) {
                    callbacknull, areaNode);
                }
            });
        }

//         $'#area-tree').on'mouseenter mouseleave', 'h2[data-adcode]', functione) {
// 
//             if e.type === 'mouseleave') {
//                 districtExplorer.setHoverFeaturenull);
//                 return;
//             }
// 
//             var adcode = $this).attr'data-adcode');
// 
//             districtExplorer.setHoverFeaturecurrentAreaNode.getSubFeatureByAdcodeadcode));
//         });


//         $'#area-tree').on'click', 'h2[data-children-num]', function) {
// 
//             var adcode = $this).attr'data-adcode');
// 
//             switch2AreaNodeadcode);
//         });

//         $'#area-tree').on'click', '.showHideBtn', function) {
// 
//             var $li = $this).closest'li');
// 
//             $li.toggleClass'hide-sub');
// 
//             if !$li.hasClass'hide-sub')) {
// 
//                 //子节点列表被展开
//                 var $subList = $li.children'ul.sublist');
// 
//                 //尚未加载
//                 if !$subList.attr'data-loaded')) {
// 
//                     $subList.attr'data-loaded', 'loading');
// 
//                     $li.addClass'loading');
// 
//                     //加载
//                     loadAreaNode$li.children'h2').attr'data-adcode'), function) {
// 
//                         $li.removeClass'loading');
//                     });
//                 }
//             }
//         });

        //全国
        switch2AreaNode610100);
    });
    </script>
</body>

</html>
效果预览
 

Published by

风君子

独自遨游何稽首 揭天掀地慰生平