百度地图上的行政区域内部颜色的动态改变

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图上的行政区域内部颜色的动态改变相关的知识，希望对你有一定的参考价值。

今天刚完成百度地图上的行政区域内部颜色的动态改变（随时间）。虽然能基本实现功能，但每次改变颜色时都要重新加载覆盖物（行政区域）。

 

全部源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>查询区域病情分布</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"/>  
</script>
    <style type="text/css">
        body {
            font-size: 13px;
            margin: 10px
        }
        
        #container {
            width: 1200px;
            height: 800px;
            border: 1px solid gray;
            margin: auto auto;
        }
        
        #controler {
            text-align: center;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div id="controler">
        输入区域名称：<input type="text" id="districtName" style="width:80px" value="请输入"/>
        <input type="button" onclick="getBoundary()" value="获取区域病情分布"/>
    </div>
</body>

</html>

<script type="text/javascript">  
var map = new BMap.Map("container");  
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);  
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));  
map.enableScrollWheelZoom();  

var colorArray = new Array("red","blue","green","orange"); //建立颜色库
var n = 0; 
function getBoundary(){    
    changeColor(); //执行函数，改变区域颜色
    var bdary = new BMap.Boundary();  
    var name = document.getElementById("districtName").value;  
    bdary.get(name, function(rs){       //获取行政区域  
        map.clearOverlays();        //清除地图覆盖物  
        var count = rs.boundaries.length; //行政区域的点有多少个  
        for(var i = 0; i < count; i++){  
            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000", fillColor:color});  //建立多边形覆盖物  
            map.addOverlay(ply);  //添加覆盖物  
            map.setViewport(ply.getPath());    //调整视野           
        }                  
    });     
}  

function changeColor(){    
    color = colorArray[n]; 
    
    n++;
    if (n==(colorArray.length))
       n=0;
    setTimeout("getBoundary()",3000);
    //setTimeout("changeColor()",1000);
}
//changeColor();
//changeColor();

</script>

 

以上是关于百度地图上的行政区域内部颜色的动态改变的主要内容，如果未能解决你的问题，请参考以下文章

Qt编写的项目作品20-百度地图综合应用(在线+离线+区域)

百度地图添加多个行政区划

百度echarts地图怎么设置边框外围颜色

百度地图里的标记点能改颜色么 怎么改

google地图区域颜色的改变 var map = new google.maps.Map(document.getElementById("map_canvas"), myOpt

echarts地图demo（模拟迁徙）上的数字颜色大小如何调整？求高手。。