百度和谷歌地圖顯示區域輪廓示例

作者：劉明 2012-02-03 14:01:15

最近項目中需要實現用地圖顯示各省份區域銷售業績的統計功能，即省份用不同顏色標示出來。花時間研究了下，其實Google Map 和 Baidu Map 都有相關實現方法。即獲取區域輪廓坐標系，然后繪制自定義圖層。

最近項目中需要實現用地圖顯示各省份區域銷售業績的統計功能，即省份用不同顏色標示出來。

花時間研究了下，其實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

http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm

原文：http://www.cnblogs.com/liuming/archive/2012/02/01/2334305.html

【編輯推薦】

百度地圖API中如何用好摩卡托坐標
百度3D地圖API的調用以及適應過程
百度地圖API之如何制作公交導航
百度地圖API如何批量轉換為百度經緯度
百度地圖API開發指南

責任編輯：陳貽新來源：劉明的博客

地圖