高德地图下拉搜索南网五省根据电价区分区域颜色

Posted 2020-12-05 sunyilindbk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高德地图下拉搜索南网五省根据电价区分区域颜色相关的知识，希望对你有一定的参考价值。
<!-- 重点： 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:MyPublicgaodeMAPjsjquery-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>
以上是关于高德地图下拉搜索南网五省根据电价区分区域颜色的主要内容，如果未能解决你的问题，请参考以下文章
高德地图 下拉搜索南网五省 根据电价区分区域颜色

高德地图下拉搜索南网五省根据电价区分区域颜色
