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

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 2141 次

最近项目中需要实现用地图显示各省份区域销售业绩的统计功能，即省份用不同颜色标示出来。花时间研究了下，其实GoogleMap和BaiduMap都有相关实现方法。即获取区域轮廓坐标系，然后绘制自定义图层

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

花时间研究了下，其实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

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。