标签:position 直接 enable public def doctype ext asc ack
<!-- 重点: on, setAreaNodesForLocating --> <!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/events.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> <style> html, body, #container { width: 100%; height: 100%; margin: 0px; } #search{ position: relative; z-index: 20; margin-bottom:-20px; } #tip { background-color: #fff; padding:0 10px; border: 1px solid silver; box-shadow: 3px 4px 3px 0px silver; position: absolute; font-size: 12px; right: 10px; top: 5px; border-radius: 3px; line-height: 36px; } </style> </head> <body> <div id="container"></div> <div id="tip"> 省:<select id=‘province‘ style="width:100px" onchange=‘search(this)‘></select> 市:<select id=‘city‘ style="width:100px" onchange=‘search(this)‘></select> 区:<select id=‘district‘ style="width:100px" onchange=‘search(this)‘></select> 街道:<select id=‘street‘ style="width:100px" onchange= ‘setCenter(this)‘></select> </div> <script type="text/javascript" src=‘https://webapi.amap.com/maps?v=1.4.8&key=3eea2775baa95074bbac31d5e5490726&plugin=AMap.DistrictSearch‘></script> <!-- UI组件库 1.0 --> <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> <script src="E:\MyPublic\gaodeMAP\js\jquery-1.11.2.min.js"></script> <script type="text/javascript"> var mapDatas = [ { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41445866, "REGIONNAME": "广州市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41354713, "REGIONNAME": "韶关市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.42041984, "REGIONNAME": "深圳市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41093388, "REGIONNAME": "珠海市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41342017, "REGIONNAME": "汕头市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41336784, "REGIONNAME": "佛山市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40996575, "REGIONNAME": "江门市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40668768, "REGIONNAME": "湛江市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40763706, "REGIONNAME": "茂名市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41367927, "REGIONNAME": "肇庆市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41789693, "REGIONNAME": "惠州市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41459185, "REGIONNAME": "梅州市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41576698, "REGIONNAME": "汕尾市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41482884, "REGIONNAME": "河源市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41064483, "REGIONNAME": "阳江市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41546825, "REGIONNAME": "清远市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41828379, "REGIONNAME": "东莞市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41126406, "REGIONNAME": "中山市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41232637, "REGIONNAME": "潮州市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41406927, "REGIONNAME": "揭阳市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.41337121, "REGIONNAME": "云浮市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40213293, "REGIONNAME": "贵阳市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.38831747, "REGIONNAME": "六盘水市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40366817, "REGIONNAME": "遵义市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.39971408, "REGIONNAME": "安顺市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.4089855, "REGIONNAME": "铜仁市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40215451, "REGIONNAME": "黔西南布依族苗族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.39332938, "REGIONNAME": "毕节市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40215451, "REGIONNAME": "黔东南苗族侗族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40215451, "REGIONNAME": "黔南布依族苗族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "南宁市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "柳州市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "桂林市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "梧州市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "北海市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "防城港市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "钦州市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "贵港市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "玉林市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "百色市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "贺州市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "河池市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "来宾市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40401939, "REGIONNAME": "崇左市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40505433, "REGIONNAME": "海口市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40792346, "REGIONNAME": "三亚市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "三沙市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "五指山市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40904352, "REGIONNAME": "琼海市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40199688, "REGIONNAME": "儋州市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "文昌市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "万宁市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "东方市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "定安县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "屯昌县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "澄迈县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "临高县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "白沙黎族自治县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "昌江黎族自治县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "乐东黎族自治县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "陵水黎族自治县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "保亭黎族苗族自治县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0.40262911, "REGIONNAME": "琼中黎族苗族自治县" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "昆明市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "曲靖市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "玉溪市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "保山市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "昭通市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "丽江市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "普洱市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "临沧市" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "楚雄彝族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "红河哈尼族彝族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "文山壮族苗族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "西双版纳傣族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "大理白族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "德宏傣族景颇族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "怒江傈僳族自治州" }, { "INTERVALSTARTTIME": "2018-06-22 17:45:00", "PRICE": 0, "REGIONNAME": "迪庆藏族自治州" } ] //创建地图 var map = new AMap.Map(‘container‘, { resizeEnable: true, center: [107.30946, 23.937629], zoom: 7 }); // 根据电价值来选择颜色,根据行政编号来确定地图颜色区域 //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; } var contentText = feature.properties.name; mapDatas.map(item=>{ if(feature.properties.name == item.REGIONNAME){ contentText = `<div>${feature.properties.name}</div><div>电价:${item.PRICE}</div>`; } }) tipMarker.setMap(map); tipMarker.setPosition(e.originalEvent.lnglat); tipMarker.setLabel({ offset: new AMap.Pixel(20, 20), content: contentText //气泡里的内容 }); }); //监听鼠标在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(‘区域外点击‘); }); var colorsFun = (value) => { if (value>=0&&value<=0.099){ return colors[0] }else if(value>=0.1&&value<=0.199){ return colors[1] }else if(value>=0.2&&value<=0.299){ return colors[2] }else if(value>=0.3&&value<0.4){ return colors[3] }else if(value>=0.4&&value<=0.499){ return colors[4] }else if(value>=0.5&&value<=0.599){ return colors[5] }else if(value>=0.6&&value<=0.699){ return colors[6] }else if(value>=0.7&&value<=0.799){ return colors[7] }else if(value>=0.8&&value<=0.9){ return colors[8] }else if(value>0.9){ return colors[9] }else{ return ‘#fff‘ } } function renderAreaNode(areaNode) { // if ([310000, 330100, 330200].indexOf(areaNode.getAdcode()) >= 0) { // 440000, //广东 // 450000, //广西 // 460000, //海南 // 520000, //贵州 // 530000, //云南 if ([440000, 450000, 460000,520000,530000].indexOf(areaNode.getAdcode()) >= 0) { //绘制子区域 districtExplorer.renderSubFeatures(areaNode, function(feature, i) { // console.log("feature",feature); // console.log(‘i‘,i) var fillColor = ‘#fff‘,strokeColor = ‘#fff‘ mapDatas.map(item=>{ if(feature.properties.name == item.REGIONNAME){ fillColor = strokeColor = colorsFun(item.PRICE); } }) // 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 = [ 440000, //广东 450000, //广西 460000, //海南 520000, //贵州 530000, //云南 // 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(); // map.setFitView(districtExplorer.getAllFeaturePolygons()); }); }); // 根据下拉框 来获取 选中的地区 并将它突出显示 var map, district, polygons = [], citycode; var citySelect = document.getElementById(‘city‘); var districtSelect = document.getElementById(‘district‘); var areaSelect = document.getElementById(‘street‘); // map = new AMap.Map(‘mapContainer‘, { // resizeEnable: true, // center: [116.30946, 39.937629], // zoom: 3 // }); //行政区划查询 var opts = { subdistrict: 1, //返回下一级行政区 showbiz:false //最后一级返回街道信息 }; district = new AMap.DistrictSearch(opts);//注意:需要使用插件同步下发功能才能这样直接使用 district.search(‘中国‘, function(status, result) { if(status==‘complete‘){ getData(result.districtList[0]); } }); function getData(data,level) { var bounds = data.boundaries; if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { var polygon = new AMap.Polygon({ map: map, strokeWeight: 1, strokeColor: ‘#CC66CC‘, fillColor: ‘#CCF3FF‘, fillOpacity: 0.5, path: bounds[i] }); polygons.push(polygon); } map.setFitView(polygons);//地图自适应 // map.setFitView(districtExplorer.getAllFeaturePolygons()); } //清空下一级别的下拉列表 if (level === ‘province‘) { citySelect.innerHTML = ‘‘; districtSelect.innerHTML = ‘‘; areaSelect.innerHTML = ‘‘; } else if (level === ‘city‘) { districtSelect.innerHTML = ‘‘; areaSelect.innerHTML = ‘‘; } else if (level === ‘district‘) { areaSelect.innerHTML = ‘‘; } var subList = data.districtList; var subList2 = []; if(!level){ subList.map(item => { if(item.name == ‘广东省‘ || item.name == ‘广西壮族自治区‘ || item.name == ‘云南省‘ || item.name == ‘贵州省‘ || item.name == ‘海南省‘){ subList2.push(item) } }) subList = subList2; } if (subList) { var contentSub = new Option(‘--请选择--‘); var curlevel = subList[0].level; var curList = document.querySelector(‘#‘ + curlevel); curList.add(contentSub); for (var i = 0, l = subList.length; i < l; i++) { var name = subList[i].name; var levelSub = subList[i].level; var cityCode = subList[i].citycode; contentSub = new Option(name); contentSub.setAttribute("value", levelSub); contentSub.center = subList[i].center; contentSub.adcode = subList[i].adcode; curList.add(contentSub); } } } function search(obj) { //清除地图上所有覆盖物 for (var i = 0, l = polygons.length; i < l; i++) { polygons[i].setMap(null); } var option = obj[obj.options.selectedIndex]; var keyword = option.text; //关键字 var adcode = option.adcode; district.setLevel(option.value); //行政区级别 district.setExtensions(‘all‘); //行政区查询 //按照adcode进行查询可以保证数据返回的唯一性 district.search(adcode, function(status, result) { if(status === ‘complete‘){ getData(result.districtList[0],obj.id); } }); } function setCenter(obj){ map.setCenter(obj[obj.options.selectedIndex].center) } </script> <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script> </body> </html>
标签:position 直接 enable public def doctype ext asc ack
原文地址:https://www.cnblogs.com/sunyilindbk/p/9342869.html