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

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

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

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

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

 

 

代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>获取地区轮廓线</title> 
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true"> 
  7. </script> 
  8. <style type="text/css"> 
  9. body{font-size:13px;margin:10px}  
  10. #container{width:1200px;height:650px;border:1px solid gray}  
  11. </style> 
  12. </head> 
  13. <body> 
  14. <div id="container"></div> 
  15.  
  16. <script type="text/javascript"> 
  17. if (typeof console == "undefined"){  
  18.   window.console = {log: function(){}};  
  19. }  
  20.  
  21. var map = new BMap.Map("container");  
  22. map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);  
  23. var stdMapCtrl = new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})  
  24. map.addControl(stdMapCtrl);  
  25. map.enableScrollWheelZoom();  
  26. map.enableContinuousZoom();  
  27. function getBoundary(data){  
  28.     var bdary = new BMap.Boundary();  
  29.     bdary.get(data.split("-")[0], function(rs){  
  30.         console.log(rs);  
  31.           
  32.         var bounds;  
  33.         var maxNum = -1, maxPly;  
  34.           
  35.         var count = rs.boundaries.length;   
  36.         for(var i = 0; i < count; j++){  
  37.             var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeOpacity:0.5,fillColor:data.split("-")[1],strokeColor: "#000000"});  
  38.             map.addOverlay(ply);    
  39.             var arrPts = ply.getPoints();  
  40.             if(arrPts.length > maxNum){  
  41.                 maxNum = arrPts.length;  
  42.                 maxPly = ply;  
  43.             }  
  44.         }  
  45.         if(maxPly){  
  46.             map.setViewport(maxPly.getPoints());  
  47.         }        
  48.     });  
  49. }  
  50. map.clearOverlays();  
  51. var datas = new Array("湖南-#ff0000","湖北-#ff5500","江西-#ffff00","重庆-#00ff00","贵州-#00ff55");  
  52. for(var i=0;i<datas.length;i++){  
  53.     getBoundary(datas[i]);  
  54. }  
  55. </script> 
  56. </body> 
  57. </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

【编辑推荐】

  1. 百度地图API中如何用好摩卡托坐标
  2. 百度3D地图API的调用以及适应过程
  3. 百度地图API之如何制作公交导航
  4. 百度地图API如何批量转换为百度经纬度
  5. 百度地图API开发指南
责任编辑:陈贻新 来源: 刘明的博客
相关推荐

2011-09-29 11:00:54

百度地图API

2011-09-16 10:37:42

地图API

2011-10-21 09:28:25

百度地图API

2011-10-21 10:16:25

百度地图API

2021-06-15 14:33:00

高德百度腾讯

2010-06-29 11:02:05

百度谷歌

2013-04-08 14:59:54

Android学习笔记百度地图Overlay

2011-09-26 10:05:19

百度地图API

2010-09-03 09:28:30

2009-04-22 14:31:05

2011-10-09 11:07:40

百度地图API

2013-08-05 11:28:11

百度谷歌互联网

2011-10-24 14:01:29

API

2011-05-25 14:36:17

2011-09-16 14:39:02

百度地图API

2013-04-08 14:46:42

Android学习笔记百度地图

2022-03-27 10:04:23

Angular8项目vue

2020-12-11 22:02:00

百度地图Apollo

2009-09-25 09:22:14

百度李彦宏演讲

2018-02-07 07:00:09

点赞
收藏

51CTO技术栈公众号