本來是支持地圖下鑽的，去掉注釋代碼即可
<!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/$'], function(DistrictExplorer, $) { //創建一個實例 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.get(0), offset: new AMap.Pixel(0, 0), bubble: true }); //根據Hover狀態設置相關樣式 function toggleHoverFeature(feature, isHover, position) { tipMarker.setMap(isHover ? map : null); if (!feature) { return; } var props = feature.properties; if (isHover) { //更新提示內容 $tipMarkerContent.html(props.adcode + ': ' + props.name); //更新位置 tipMarker.setPosition(position || props.center); } $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover); //更新相關多邊形的樣式 var polys = districtExplorer.findFeaturePolygonsByAdcode(props.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', function(e, feature) { toggleHoverFeature(feature, e.type === 'featureMouseover', e.originalEvent ? e.originalEvent.lnglat : null); }); //監聽鼠標在feature上滑動 districtExplorer.on('featureMousemove', function(e, feature) { //更新提示位置 tipMarker.setPosition(e.originalEvent.lnglat); }); //feature被點擊 districtExplorer.on('featureClick', function(e, feature) { debugger var props = feature.properties; //如果存在子節點 if (props.childrenNum > 0) { //切換聚焦區域 switch2AreaNode(props.adcode); } }); //外部區域被點擊 // districtExplorer.on('outsideClick', function(e) { // // districtExplorer.locatePosition(e.originalEvent.lnglat, function(error, routeFeatures) { // // if (routeFeatures && routeFeatures.length > 1) { // //切換到省級區域 // switch2AreaNode(routeFeatures[1].properties.adcode); // } else { // //切換到全國 // switch2AreaNode(100000); // } // // }, { // levelLimit: 2 // }); // }); //繪制區域面板的節點 function renderAreaPanelNode(ele, 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 || void(0), 'data-center': props.center.join(',') }).html(props.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.appendTo(ele); } //填充某個節點的子區域列表 function renderAreaPanel(areaNode) { 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.getPropsOfFeature(subFeatures[i]), colors[i % colors.length]); } } //繪制某個區域的邊界 function renderAreaPolygons(areaNode) { //更新地圖視野 map.setBounds(areaNode.getBounds(), null, null, true); //清除已有的繪制內容 districtExplorer.clearFeaturePolygons(); //繪制子區域 districtExplorer.renderSubFeatures(areaNode, function(feature, 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.renderParentFeature(areaNode, { cursor: 'default', bubble: true, strokeColor: 'black', //線顏色 strokeOpacity: 1, //線透明度 strokeWeight: 1, //線寬 fillColor: null, //填充色 fillOpacity: 0.2, //填充透明度 }); } //切換區域后刷新顯示內容 function refreshAreaNode(areaNode) { districtExplorer.setHoverFeature(null); renderAreaPolygons(areaNode); //更新選中節點的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 switch2AreaNode(adcode, callback) { if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) { return; } loadAreaNode(adcode, function(error, areaNode) { if (error) { if (callback) { callback(error); } return; } currentAreaNode = window.currentAreaNode = areaNode; //設置當前使用的定位用節點 districtExplorer.setAreaNodesForLocating([currentAreaNode]); refreshAreaNode(areaNode); if (callback) { callback(null, areaNode); } }); } //加載區域 function loadAreaNode(adcode, callback) { districtExplorer.loadAreaNode(adcode, function(error, areaNode) { if (error) { if (callback) { callback(error); } console.error(error); return; } renderAreaPanel(areaNode); if (callback) { callback(null, areaNode); } }); } // $('#area-tree').on('mouseenter mouseleave', 'h2[data-adcode]', function(e) { // // if (e.type === 'mouseleave') { // districtExplorer.setHoverFeature(null); // return; // } // // var adcode = $(this).attr('data-adcode'); // // districtExplorer.setHoverFeature(currentAreaNode.getSubFeatureByAdcode(adcode)); // }); // $('#area-tree').on('click', 'h2[data-children-num]', function() { // // var adcode = $(this).attr('data-adcode'); // // switch2AreaNode(adcode); // }); // $('#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'); // }); // } // } // }); //全國 switch2AreaNode(610100); }); </script> </body> </html>
效果預覽
