百度和谷歌地图显示区域轮廓示例

Murdererlingdu

2012-02-03

关注关注

最近项目中需要实现用地图显示各省份区域销售业绩的统计功能，即省份用不同颜色标示出来。

花时间研究了下，其实Google Map 和 Baidu Map 都有相关实现方法。即获取区域轮廓坐标系，然后绘制自定义图层。

效果图(用百度地图弄的)

代码

<!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=gb2312" /> 




<title>获取地区轮廓线</title> 




<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true"> 




</script> 




<style type="text/css"> 



body{font-size:13px;margin:10px}  


#container{width:1200px;height:650px;border:1px solid gray}  



</style> 




</head> 




<body> 




<div id="container"></div> 



 



<script type="text/javascript"> 




if (typeof console == "undefined"){  




  window.console = {log: function(){}};  



}  


 



var map = new BMap.Map("container");  



map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);  



var stdMapCtrl = new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})  



map.addControl(stdMapCtrl);  


map.enableScrollWheelZoom();  


map.enableContinuousZoom();  


function getBoundary(data){  



    var bdary = new BMap.Boundary();  



    bdary.get(data.split("-")[0], function(rs){  


        console.log(rs);  


          


        var bounds;  



        var maxNum = -1, maxPly;  



          



        var count = rs.boundaries.length;   




        for(var i = 0; i < count; j++){  




            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeOpacity:0.5,fillColor:data.split("-")[1],strokeColor: "#000000"});  



            map.addOverlay(ply);    



            var arrPts = ply.getPoints();  




            if(arrPts.length > maxNum){  




                maxNum = arrPts.length;  




                maxPly = ply;  



            }  


        }  


        if(maxPly){  


            map.setViewport(maxPly.getPoints());  


        }        


    });  


}  


map.clearOverlays();  



var datas = new Array("湖南-#ff0000","湖北-#ff5500","江西-#ffff00","重庆-#00ff00","贵州-#00ff55");  




for(var i=0;i<datas.length;i++){  



    getBoundary(datas[i]);  


}  



</script> 




</body> 




</html>

Google Map 相关实现示例(小弟尚未找到像百度地图一样通过 “地区名字” 获取坐标系的方法)

http://gmaps-samples-v3.googlecode.com/svn/trunk/layers/layers.html

http://gmaps-samples-v3.googlecode.com/svn/trunk/cloud/cloud.html

http://home.provide.net/~bratliff/polycluster/v3/absurd.html

http://home.provide.net/~bratliff/polycluster/v3/alaska.html

谷歌百度谷歌地图api