码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-10-14 06:46:47      阅读:1411      评论:0      收藏:0      [点我收藏+]

标签:

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

 

全部源代码如下:

<!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>

 

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

标签:

原文地址:http://www.cnblogs.com/DodgeYoung/p/5958653.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!