百度和谷歌地圖顯示區(qū)域輪廓示例
作者：劉明
最近項目中需要實現(xiàn)用地圖顯示各省份區(qū)域銷售業(yè)績的統(tǒng)計功能，即省份用不同顏色標示出來?；〞r間研究了下，其實Google Map 和 Baidu Map 都有相關(guān)實現(xiàn)方法。即 獲取區(qū)域輪廓坐標系，然后繪制自定義圖層。
最近項目中需要實現(xiàn)用地圖顯示各省份區(qū)域銷售業(yè)績的統(tǒng)計功能，即省份用不同顏色標示出來。
花時間研究了下，其實Google Map 和 Baidu Map 都有相關(guān)實現(xiàn)方法。即 獲取區(qū)域輪廓坐標系，然后繪制自定義圖層。
效果圖(用百度地圖弄的)
代碼
- <!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>獲取地區(qū)輪廓線</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 相關(guān)實現(xiàn)示例(小弟尚未找到像百度地圖一樣通過 “地區(qū)名字” 獲取坐標系 的方法)
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
【編輯推薦】
責任編輯：陳貽新
來源：
劉明的博客
