百度地圖三級聯動

百度地圖省市縣三級聯動，參考網絡上的畫區塊代碼，地區數據太多只能上傳一部分，

chinaArea = [{"id":"801","pid":"0","shortname":"上海","name":"上海","merger_name":"中國,上海","level":"1","pinyin":"shanghai","code":"","zip_code":"","first":"S","lng":"121.472644","lat":"31.231706","index":0,"child":[{"id":"802","pid":"801","shortname":"上海","name":"上海市","merger_name":"中國,上海,上海市","level":"2","pinyin":"shanghai","code":"021","zip_code":"200000","first":"S","lng":"121.472644","lat":"31.231706","index":0,"child":[{"id":"803","pid":"802","shortname":"黃浦","name":"黃浦區","merger_name":"中國,上海,上海市,黃浦區","level":"3","pinyin":"huangpu","code":"021","zip_code":"200001","first":"H","lng":"121.49295","lat":"31.22337","index":0},{"id":"804","pid":"802","shortname":"徐匯","name":"徐匯區","merger_name":"中國,上海,上海市,徐匯區","level":"3","pinyin":"xuhui","code":"021","zip_code":"200030","first":"X","lng":"121.43676","lat":"31.18831","index":1},{"id":"805","pid":"802","shortname":"長寧","name":"長寧區","merger_name":"中國,上海,上海市,長寧區","level":"3","pinyin":"changning","code":"021","zip_code":"200050","first":"C","lng":"121.42462","lat":"31.22036","index":2},{"id":"806","pid":"802","shortname":"靜安","name":"靜安區","merger_name":"中國,上海,上海市,靜安區","level":"3","pinyin":"jing'an","code":"021","zip_code":"200040","first":"J","lng":"121.4444","lat":"31.22884","index":3},{"id":"807","pid":"802","shortname":"普陀","name":"普陀區","merger_name":"中國,上海,上海市,普陀區","level":"3","pinyin":"putuo","code":"021","zip_code":"200333","first":"P","lng":"121.39703","lat":"31.24951","index":4}]}]}]

<div class="pull-left" style="width:760px;border-right:1px solid #c2c2c2;position:relative;background-color: #fff;">
                        <div id="container" style="width:758px;height:508px;margin-top:40px;background-color: #fff;"></div>
                        <div style="position: absolute;top:5px;left:10px;">
                            <!--   <input  type="button" value="" style="background-color: transparent;border: none;">-->
                            <i class="fa fa-chevron-left" id="area-back" style="padding: 0 10px;"></i>
                            <div id="select-area" style="display:inline-block;">
                                <select name="area-province" id="area-province" style="padding: 3px 0;">
                                    <option value="0">請選擇省</option>
                                </select>
                                <span>-</span>
                                <select name="area-city" id="area-city" style="padding: 3px 0;">
                                    <option value="0">請選擇市</option>
                                </select>
                                <span>-</span>
                                <select name="area-area" id="area-area" style="padding: 3px 0;">
                                    <option value="0">請選擇縣</option>
                                </select>
                            </div>
                            <!-- <span>您已選中：</span>
                             <span id="area-selected" style="color:#ee4253;font-size: 12px;"></span>-->
                        </div>
                    </div>

var colors = [
    '#f2d4e9', '#efc6e3', '#ebb8dc', '#dfafd2',
    '#dedaee', '#d3cee7', '#c9c1e3', '#beb8d7',
    '#edddd9', '#e7d1ce', '#e2c4bf', '#d7bbb7',
    '#f8e2cd', '#f4d7be', '#f2cdae', '#e7c3a6',
    '#d8eeee', '#cde9e8', '#bfe2e1', '#b6d8d5',
    '#e8efda', '#e1e9cd', '#d8e3c0', '#cfd8b6',
    '#ebf6d1', '#e5f1c4', '#ddeeb5', '#d4e2ac',
    '#f5f4d1', '#f1efc4', '#eceab4', '#e0ddab',
    '#d8e8ee', '#cce2e8', '#bfd9e1', '#b6d1d7'
];

/**
 * 返回下一個顏色
 */
var colorsIndex = 0;
function colorsNext(area) {
    if (!area) {
        if (++colorsIndex > colors.length) colorsIndex = 0;
        return colors[colorsIndex];
    }else{
        var areaIndex = 0;
        if(area.index <= colors.length){
            areaIndex = area.index;
        }
        return colors[areaIndex];
    }
}

/**
 * 搜索地區，必傳屬性level
 * @filterObj objcet 搜索條件對象，可用屬性level、id、name、shortname、merger_name
 * @returns  地區
 */
function filterArea(filterObj) {
    var result = false;
    for (i in chinaArea) {
        var province = chinaArea[i];
        if (filterObj.level == 1 && (province.id == filterObj.id || province.name == filterObj.name || province.shortname == filterObj.shortname || province.merger_name == filterObj.merger_name)) {
            result = province;
        } else {
            for (j in chinaArea[i].child) {
                var city = chinaArea[i].child[j];
                if (filterObj.level == 2 && (city.id == filterObj.id || city.name == filterObj.name || city.shortname == filterObj.shortname || city.merger_name == filterObj.merger_name)) {
                    result = city;
                } else {
                    for (k in chinaArea[i].child[j].child) {
                        var area = chinaArea[i].child[j].child[k];
                        if (filterObj.level == 3 && (area.id == filterObj.id || area.name == filterObj.name || area.shortname == filterObj.shortname || area.merger_name == filterObj.merger_name)) {
                            result = area;
                        } else {
                            continue;
                        }
                    }
                }
            }
        }
    }
    return result;
}

/**
 * 搜索地區父級，必傳屬性level
 * @filterObj objcet 搜索條件對象，可用屬性level、id、name、shortname、merger_name
 * @returns  地區
 */
function filterAreaParent(filterObj) {
    var result = false;
    for (i in chinaArea) {
        var province = chinaArea[i];
        if (filterObj.level == 1 && (province.id == filterObj.id || province.name == filterObj.name || province.shortname == filterObj.shortname || province.merger_name == filterObj.merger_name)) {
            result = chinaArea;
        } else {
            for (j in chinaArea[i].child) {
                var city = chinaArea[i].child[j];
                if (filterObj.level == 2 && (city.id == filterObj.id || city.name == filterObj.name || city.shortname == filterObj.shortname || city.merger_name == filterObj.merger_name)) {
                    result = province;
                } else {
                    for (k in chinaArea[i].child[j].child) {
                        var area = chinaArea[i].child[j].child[k];
                        if (filterObj.level == 3 && (area.id == filterObj.id || area.name == filterObj.name || area.shortname == filterObj.shortname || area.merger_name == filterObj.merger_name)) {
                            result = city;
                        } else {
                            continue;
                        }
                    }
                }
            }
        }
    }
    return result;
}

//提示：下面的代碼用jquery，所以如果有不能運行的情況請引用后嘗試
//百度地圖api container對應前端div名稱 前端要引用2.0版本的百度地圖api
//需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js
var map = new BMap.Map("container", {enableMapClick: false}); // 創建地圖實例，禁止點擊地圖底圖



setTimeout(function(){map.setZoom(5);},1000);



//設置樣式
map.setMapStyle({
    styleJson: [
        {
            "featureType": "poi",
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "off"
            }
        },
        {
            "featureType": "road",
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "off"
            }
        },
        {
            "featureType": "water",
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "off"
            }
        },
        {
            "featureType": "background",
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "on"
            }
        },
        {
            "featureType": "administrative",
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "off"
            }
        }
    ]
});


//map.disableDragging();//禁止拖動
map.disableDoubleClickZoom();//禁止雙擊縮放
//    map.enableScrollWheelZoom(true); //滾動縮放
//    map.addControl(new BMap.CopyrightControl({offset: new BMap.Size(0, 0)}));

var blist = [];
var districtLoading = 0;
var districtNameList = [];

/**
 * 畫圖入口
 */
function getBoundary(areas) {
    map.clearOverlays();
    blist = [];

    for (i in areas) {
        addDistrict(areas[i]);
    }
}

/**
 * 添加行政區划
 * @param {} districtName 行政區划名
 * @returns  無返回值
 */
function addDistrict(area) {
    var districtName = area.name;
    //使用計數器來控制加載過程
    districtLoading++;
    var bdary = new BMap.Boundary();
    bdary.get(districtName, function (rs) {       //獲取行政區域
        if ($.inArray(districtName, districtNameList) >= 0) return;
        districtNameList.push(districtName);
        var count = rs.boundaries.length; //行政區域的點有多少個
        if (count === 0) {
            districtLoading--;
            console.error('未能獲取當前輸入行政區域');
            console.info(area);
            return;
        }

        color = colorsNext(area);

        for (var i = 0; i < count; i++) {
            blist.push({points: rs.boundaries[i], name: districtName, color: color});
        }

        //加載完成區域點后計數器-1
        districtLoading--;
        if (districtLoading == 0) {
            colorsIndex = districtLoading = districtNameList.length = 0;
            //全加載完成后畫端點
            drawBoundary();
        }
    });
}

/**
 * 處理選區
 */
function areaClick(area) {
    $('#area-selected').html(area.merger_name);
    $('#area-back').data('area', area);

    if(!(!!area && !!area.child && area.child.length) && !!area.name){
        console.log(area);
        bootbox.alert('已選擇區域： ' + area.name);
    }

    if(!!area && area.level == 1){
        $('#area-province').val(area.id);
        if(!!area.child && area.child.length){
            $('#area-city').find('option:gt(0)').remove();
            $('#area-area').find('option:gt(0)').remove()
            for(i in area.child){
                var child = area.child[i];
                var optionStr = '<option value="'+ child.id +'">'+ child.name +'</option>';
                $('#area-city').append(optionStr);
            }
        }
    }
    if(!!area && area.level == 2){
        $('#area-city').val(area.id);
        if(!!area.child && area.child.length){
            $('#area-area').find('option:gt(0)').remove()
            for(i in area.child){
                var child = area.child[i];
                var optionStr = '<option value="'+ child.id +'">'+ child.name +'</option>';
                $('#area-area').append(optionStr);
            }
        }
    }

    if(!!area && area.level == 3){
        $('#area-area').val(area.id);
    }
}

/**
 * 返回按鈕單擊事件
 */
$(document).on('click', '#area-back', function (e) {
    var $this = $(this);
    var area = $this.data('area');
    var areaParent = false;
    if (area.level == 1) {
        areaParent = chinaArea;
        getBoundary(chinaArea);
    } else {
        areaParent = filterAreaParent(area);
        if (!!areaParent && !!areaParent.child && !!areaParent.child.length) {
            getBoundary(areaParent.child);
        }
    }
    areaClick(areaParent);
});

/**
 * 地圖鼠標事件綁定
 */
function click(evt) {
    var targetName = evt.target.name;
    var area = false;

    if (area = filterArea({name: targetName, level: 1})) {
        if (!!area.child && !!area.child.length) {
            getBoundary(area.child);
            $("#area-selected-p").val(area.name);
        } else {
            console.log('已選中：' + area.merger_name);
        }
        areaClick(area);
    } else if (area = filterArea({name: targetName, level: 2})) {
        if (!!area.child && !!area.child.length) {
            getBoundary(area.child);
            $("#area-selected-c").val(area.name);
        } else {
            console.log('已選中：' + area.merger_name);
        }
        areaClick(area);
    } else if (area = filterArea({name: targetName, level: 3})) {
        $("#area-selected-a").val(area.name);
        console.log('已選中：' + area.merger_name);
        areaClick(area);
    }
}

function mouseover(evt) {
    evt.target.label.setZIndex(99);
    evt.target.label.setPosition(evt.point);
    evt.target.label.show();
}

function mousemove(evt) {
    evt.target.label.setPosition(evt.point);
}

function mouseout(evt) {
    evt.target.label.hide();
}

function drawBoundary() {
    //包含所有區域的點數組
    var pointArray = [];
    //循環添加各閉合區域
    for (var i = 0; i < blist.length; i++) {
        //添加顯示用標簽層
        var label = new BMap.Label(blist[i].name, {offset: new BMap.Size(20, -10)});
        label.hide();
        map.addOverlay(label);

        //添加多邊形層並顯示
        var ply = new BMap.Polygon(blist[i].points, {
            strokeWeight: 0.5,
            strokeColor: "#ff0000",
            strokeOpacity: 1,
            fillOpacity: 1,
            fillColor: blist[i].color
        }); //建立多邊形覆蓋物
        ply.name = blist[i].name;
        ply.label = label;
        ply.addEventListener("click", click);
        //ply.addEventListener("mouseover", mouseover);
        //ply.addEventListener("mouseout", mouseout);
        //ply.addEventListener("mousemove", mousemove);
        map.addOverlay(ply);

        //添加名稱標簽層
        var centerlabel = new BMap.Label(blist[i].name, {offset: new BMap.Size(0, 0)});
        centerlabel.setStyle({
            color: "#ee4253",
            fontSize: "10px",
            height: "20px",
            lineHeight: "15px",
            fontFamily: "微軟雅黑",
            //borderRadius: "10px",
            borderColor:"#ee4253",
            border:"none",
            backgroundColor:"transparent"
        });

        centerlabel.setPosition(ply.getBounds().getCenter());
        map.addOverlay(centerlabel);

        //將點增加到視野范圍內
        var path = ply.getPath();
        pointArray = pointArray.concat(path);
    }

    //限定顯示區域，需要引用api庫
    var boundply = new BMap.Polygon(pointArray);
    BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
    map.setViewport(pointArray);    //調整視野
}

getBoundary(chinaArea);



$(function(){
    for(i in chinaArea){
        var area = chinaArea[i];
        var optionStr = '<option value="'+ area.id +'">'+ area.name +'</option>';
        $('#area-province').append(optionStr);
    }
    $(document).on('change','#area-province',function(e){
        var $this = $(this);
        var id = $this.find('option:selected').val();
        var area = filterArea({level:1,id:id});
        $("#area-selected-p").val(area.name);
        $("#area-selected-c,#area-selected-a,#area-city,#area-area").val("");
        
        if(!!area){
            if(!!area.child && area.child.length){
                $('#area-city').find('option:gt(0)').remove();
                $('#area-area').find('option:gt(0)').remove()
                for(i in area.child){
                    var child = area.child[i];
                    var optionStr = '<option value="'+ child.id +'">'+ child.name +'</option>';
                    $('#area-city').append(optionStr);
                }
                getBoundary(area.child);
            }else{
                console.log(area);
                bootbox.alert('已選擇區域： ' + area.name);
            }
        }
    });
    $(document).on('change','#area-city',function(e){
        var $this = $(this);
        var id = $this.find('option:selected').val();
        var area = filterArea({level:2,id:id});
        $("#area-selected-c").val(area.name);
        if(!!area){
            if(!!area.child && area.child.length){
                $('#area-area').find('option:gt(0)').remove()
                for(i in area.child){
                    var child = area.child[i];
                    var optionStr = '<option value="'+ child.id +'">'+ child.name +'</option>';
                    $('#area-area').append(optionStr);
                }
                getBoundary(area.child);
            }else{
                console.log(area);
                bootbox.alert('已選擇區域： ' + area.name);
            }
        }
    });
    $(document).on('change','#area-area',function(e){
        var $this = $(this);
        var id = $this.find('option:selected').val();
        var area = filterArea({level:3,id:id});
        $("#area-selected-a").val(area.name);
        console.log(area);
        bootbox.alert('已選擇區域： ' + area.name);
    });
});