模吧

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

1243查看 | 5回复

GIS【百度地图API】制作网络社交地图

[复制链接]
发表于 2017-3-31 15:27:58 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法。那就是,只显示可视区域内的标注
--------------------------------------------------------------------------------------------------------------
成品图:
GIS【百度地图API】制作网络社交地图 如何,百度地图,网络,制作 作者:洋葱头 9805
工具描述:
移动地图时(或改变地图级别时),只显示可视区域内的标注。非可视区域内的标注都移除。
这样可以保持高效的系统性能。
另外,可视区域内的标注,请保持在200以内。各类浏览器方能高效地显示。
如果有超过300个marker,建议使用聚合marker类,
请参考LIB:http://dev.baidu.com/wiki/map/index.php?title=MapLibrary
GIS【百度地图API】制作网络社交地图 如何,百度地图,网络,制作 作者:洋葱头 5096 GIS【百度地图API】制作网络社交地图 如何,百度地图,网络,制作 作者:洋葱头 6351
1、从数据库里读取信息
数据库里需要存储的信息至少为:经纬度point,标注图片icon。
读取后,创建点、标注。(注意:只是创建标注,并不添加到地图上。)
  1. //创建10个点
  2. var p1 = new BMap.Point(116.387452,39.947302);
  3. var p2 = new BMap.Point(116.361581,39.961129);
  4. var p3 = new BMap.Point(116.437901,39.960133);
  5. var p4 = new BMap.Point(116.459748,39.919528);
  6. var p5 = new BMap.Point(116.424247,39.939557);
  7. var p6 = new BMap.Point(116.485188,39.974511);
  8. var p7 = new BMap.Point(116.485188,39.974511);
  9. var p8 = new BMap.Point(116.494243,39.930484);
  10. var p9 = new BMap.Point(116.45328,39.884103);
  11. var p0 = new BMap.Point(116.456011,39.844671);

  12. //创建10张图标
  13. var icon1 = new BMap.Icon("img/1.jpg", new BMap.Size(50,50));
  14. var icon2 = new BMap.Icon("img/2.jpg", new BMap.Size(50,50));
  15. var icon3 = new BMap.Icon("img/3.jpg", new BMap.Size(50,50));
  16. var icon4 = new BMap.Icon("img/4.jpg", new BMap.Size(50,50));
  17. var icon5 = new BMap.Icon("img/5.jpg", new BMap.Size(50,50));
  18. var icon6 = new BMap.Icon("img/6.jpg", new BMap.Size(50,50));
  19. var icon7 = new BMap.Icon("img/7.jpg", new BMap.Size(50,50));
  20. var icon8 = new BMap.Icon("img/8.jpg", new BMap.Size(50,50));
  21. var icon9 = new BMap.Icon("img/9.jpg", new BMap.Size(50,50));
  22. var icon0 = new BMap.Icon("img/0.jpg", new BMap.Size(50,50));

  23. //创建10个marker,但不添加到地图上
  24. var m1 = new BMap.Marker(p1,{icon:icon1});
  25. var m2 = new BMap.Marker(p2,{icon:icon2});
  26. var m3 = new BMap.Marker(p3,{icon:icon3});
  27. var m4 = new BMap.Marker(p4,{icon:icon4});
  28. var m5 = new BMap.Marker(p5,{icon:icon5});
  29. var m6 = new BMap.Marker(p6,{icon:icon6});
  30. var m7 = new BMap.Marker(p7,{icon:icon7});
  31. var m8 = new BMap.Marker(p8,{icon:icon8});
  32. var m9 = new BMap.Marker(p9,{icon:icon9});
  33. var m0 = new BMap.Marker(p0,{icon:icon0});
复制代码


为了方便运算,用一个数组将标注集合起来:
  1. //建立一个marker的数组
  2. var markers = [m1,m2,m3,m4,m5,m6,m7,m8,m9,m0,m11,m12,m13,m14,m15,m16,m17,m18,m19,m10,m21,m22,m23,m24,m25,m26,m27,m28,m29,m20];
复制代码


2、判断标注是否在可视区域内
利用几何运算的LIB可以轻松判断,标注是否在可视区域内。
几何运算LIB:http://dev.baidu.com/wiki/map/index.php?title=MapLibrary
GIS【百度地图API】制作网络社交地图 如何,百度地图,网络,制作 作者:洋葱头 5996
判断标注如果在可视区域内,则添加到地图上;如果标注不在可视区域内,则删除它。
判断代码:
  1. //显示可视区域内的标注
  2. function addMymarkers(){
  3.     for(i=0;i<markers.length;i++){
  4.         var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
  5.         if(result == true) map.addOverlay(markers[i]);
  6.         else map.removeOverlay(markers[i]);
  7.     }
  8. }
复制代码


3、将可视区域内的标注添加到地图上
在图块加载完毕,地图中心点改变,和地图级别改变时,都需要进行一次添加/移除标注的操作。
  1. //对地图级别变化、移动结束和图块加载完毕后,进行添加marker的操作
  2. map.addEventListener("tilesloaded", addMymarkers);
  3. map.addEventListener("zoomend", addMymarkers);
  4. map.addEventListener("moveend", addMymarkers);
复制代码


4、给标注的区域画一个框
为了方便观看,我用的是折线覆盖物,你也可以使用多边形覆盖物。
GIS【百度地图API】制作网络社交地图 如何,百度地图,网络,制作 作者:洋葱头 4543

  1. //添加一个矩形覆盖物
  2. var polyline = new BMap.Polyline([
  3.   new BMap.Point(116.279655,40.020499),
  4.   new BMap.Point(116.260683,39.833259),
  5.   new BMap.Point(116.532043,39.830599),
  6.   new BMap.Point(116.526869,40.021383),
  7.   new BMap.Point(116.279655,40.020499)
  8. ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
  9. map.addOverlay(polyline);
复制代码


本例全部源代码:
  1. <!DOCTYPE html>
  2. <html>
  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?v=1.2"></script>
  7. <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
  8. </head>
  9. <body>
  10. <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
  11. <div style="width:200px;height:340px;border:1px solid gray" id="info"></div>
  12. <p id="info"></p>
  13. </body>
  14. </html>
  15. <script type="text/javascript">
  16. //创建地图
  17. var map = new BMap.Map("container");
  18. map.centerAndZoom(new BMap.Point(116.387452,39.947302), 13);

  19. //添加一个矩形覆盖物
  20. var polyline = new BMap.Polyline([
  21.   new BMap.Point(116.279655,40.020499),
  22.   new BMap.Point(116.260683,39.833259),
  23.   new BMap.Point(116.532043,39.830599),
  24.   new BMap.Point(116.526869,40.021383),
  25.   new BMap.Point(116.279655,40.020499)
  26. ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
  27. map.addOverlay(polyline);

  28. //显示可视区域内的标注
  29. function addMymarkers(){
  30.     document.getElementById("info").innerHTML = '';
  31.     for(i=0;i<markers.length;i++){
  32.         var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
  33.         if(result == true) map.addOverlay(markers[i]);
  34.         else map.removeOverlay(markers[i]);
  35.         document.getElementById("info").innerHTML += '<img src="' + markers[i].getIcon().imageUrl +'" />';        
  36.     }
  37. }

  38. //对地图级别变化、移动结束和图块加载完毕后,进行添加marker的操作
  39. map.addEventListener("tilesloaded", addMymarkers);
  40. map.addEventListener("zoomend", addMymarkers);
  41. map.addEventListener("moveend", addMymarkers);

  42. //创建30个点
  43. var p1 = new BMap.Point(116.387452,39.947302);
  44. var p2 = new BMap.Point(116.361581,39.961129);
  45. var p3 = new BMap.Point(116.437901,39.960133);
  46. var p4 = new BMap.Point(116.459748,39.919528);
  47. var p5 = new BMap.Point(116.424247,39.939557);
  48. var p6 = new BMap.Point(116.485188,39.974511);
  49. var p7 = new BMap.Point(116.485188,39.974511);
  50. var p8 = new BMap.Point(116.494243,39.930484);
  51. var p9 = new BMap.Point(116.45328,39.884103);
  52. var p0 = new BMap.Point(116.456011,39.844671);

  53. var p11 = new BMap.Point(116.387165,39.850654);
  54. var p12 = new BMap.Point(116.461185,39.8975);
  55. var p13 = new BMap.Point(116.380122,39.87458);
  56. var p14 = new BMap.Point(116.354395,39.899825);
  57. var p15 = new BMap.Point(116.394495,39.887093);
  58. var p16 = new BMap.Point(116.30524,39.902482);
  59. var p17 = new BMap.Point(116.287992,39.937676);
  60. var p18 = new BMap.Point(116.277931,39.911116);
  61. var p19 = new BMap.Point(116.340166,39.929267);
  62. var p10 = new BMap.Point(116.290004,39.965885);

  63. var p21 = new BMap.Point(116.377535,39.966548);
  64. var p22 = new BMap.Point(116.423672,39.95239);
  65. var p23 = new BMap.Point(116.423672,39.95239);
  66. var p24 = new BMap.Point(116.300353,40.003146);
  67. var p25 = new BMap.Point(116.294172,39.982251);
  68. var p26 = new BMap.Point(116.313432,39.977497);
  69. var p27 = new BMap.Point(116.390183,39.983357);
  70. var p28 = new BMap.Point(116.390183,39.983357);
  71. var p29 = new BMap.Point(116.484469,39.943872);
  72. var p20 = new BMap.Point(116.509191,39.932586);

  73. //创建30张图标
  74. var icon1 = new BMap.Icon("img/1.jpg", new BMap.Size(50,50));
  75. var icon2 = new BMap.Icon("img/2.jpg", new BMap.Size(50,50));
  76. var icon3 = new BMap.Icon("img/3.jpg", new BMap.Size(50,50));
  77. var icon4 = new BMap.Icon("img/4.jpg", new BMap.Size(50,50));
  78. var icon5 = new BMap.Icon("img/5.jpg", new BMap.Size(50,50));
  79. var icon6 = new BMap.Icon("img/6.jpg", new BMap.Size(50,50));
  80. var icon7 = new BMap.Icon("img/7.jpg", new BMap.Size(50,50));
  81. var icon8 = new BMap.Icon("img/8.jpg", new BMap.Size(50,50));
  82. var icon9 = new BMap.Icon("img/9.jpg", new BMap.Size(50,50));
  83. var icon0 = new BMap.Icon("img/0.jpg", new BMap.Size(50,50));

  84. var icon11 = new BMap.Icon("img/11.jpg", new BMap.Size(50,50));
  85. var icon12 = new BMap.Icon("img/12.jpg", new BMap.Size(50,50));
  86. var icon13 = new BMap.Icon("img/13.jpg", new BMap.Size(50,50));
  87. var icon14 = new BMap.Icon("img/14.jpg", new BMap.Size(50,50));
  88. var icon15 = new BMap.Icon("img/15.jpg", new BMap.Size(50,50));
  89. var icon16 = new BMap.Icon("img/16.jpg", new BMap.Size(50,50));
  90. var icon17 = new BMap.Icon("img/17.jpg", new BMap.Size(50,50));
  91. var icon18 = new BMap.Icon("img/18.jpg", new BMap.Size(50,50));
  92. var icon19 = new BMap.Icon("img/19.jpg", new BMap.Size(50,50));
  93. var icon10 = new BMap.Icon("img/10.jpg", new BMap.Size(50,50));

  94. var icon21 = new BMap.Icon("img/21.jpg", new BMap.Size(50,50));
  95. var icon22 = new BMap.Icon("img/22.jpg", new BMap.Size(50,50));
  96. var icon23 = new BMap.Icon("img/23.jpg", new BMap.Size(50,50));
  97. var icon24 = new BMap.Icon("img/24.jpg", new BMap.Size(50,50));
  98. var icon25 = new BMap.Icon("img/25.jpg", new BMap.Size(50,50));
  99. var icon26 = new BMap.Icon("img/26.jpg", new BMap.Size(50,50));
  100. var icon27 = new BMap.Icon("img/27.jpg", new BMap.Size(50,50));
  101. var icon28 = new BMap.Icon("img/28.jpg", new BMap.Size(50,50));
  102. var icon29 = new BMap.Icon("img/29.jpg", new BMap.Size(50,50));
  103. var icon20 = new BMap.Icon("img/20.jpg", new BMap.Size(50,50));

  104. //创建30个marker,但不添加到地图上
  105. var m1 = new BMap.Marker(p1,{icon:icon1});
  106. var m2 = new BMap.Marker(p2,{icon:icon2});
  107. var m3 = new BMap.Marker(p3,{icon:icon3});
  108. var m4 = new BMap.Marker(p4,{icon:icon4});
  109. var m5 = new BMap.Marker(p5,{icon:icon5});
  110. var m6 = new BMap.Marker(p6,{icon:icon6});
  111. var m7 = new BMap.Marker(p7,{icon:icon7});
  112. var m8 = new BMap.Marker(p8,{icon:icon8});
  113. var m9 = new BMap.Marker(p9,{icon:icon9});
  114. var m0 = new BMap.Marker(p0,{icon:icon0});

  115. var m11 = new BMap.Marker(p11,{icon:icon11});
  116. var m12 = new BMap.Marker(p12,{icon:icon12});
  117. var m13 = new BMap.Marker(p13,{icon:icon13});
  118. var m14 = new BMap.Marker(p14,{icon:icon14});
  119. var m15 = new BMap.Marker(p15,{icon:icon15});
  120. var m16 = new BMap.Marker(p16,{icon:icon16});
  121. var m17 = new BMap.Marker(p17,{icon:icon17});
  122. var m18 = new BMap.Marker(p18,{icon:icon18});
  123. var m19 = new BMap.Marker(p19,{icon:icon19});
  124. var m10 = new BMap.Marker(p10,{icon:icon10});

  125. var m21 = new BMap.Marker(p21,{icon:icon21});
  126. var m22 = new BMap.Marker(p22,{icon:icon22});
  127. var m23 = new BMap.Marker(p23,{icon:icon23});
  128. var m24 = new BMap.Marker(p24,{icon:icon24});
  129. var m25 = new BMap.Marker(p25,{icon:icon25});
  130. var m26 = new BMap.Marker(p26,{icon:icon26});
  131. var m27 = new BMap.Marker(p27,{icon:icon27});
  132. var m28 = new BMap.Marker(p28,{icon:icon28});
  133. var m29 = new BMap.Marker(p29,{icon:icon29});
  134. var m20 = new BMap.Marker(p20,{icon:icon20});

  135. //建立一个marker的数组
  136. var markers = [m1,m2,m3,m4,m5,m6,m7,m8,m9,m0,m11,m12,m13,m14,m15,m16,m17,m18,m19,m10,m21,m22,m23,m24,m25,m26,m27,m28,m29,m20];
  137. </script>
复制代码

2012-02-07  更新代码:修改addMymarkers函数。
当可视区域内的标注大于10的时候,只显示10个标注。并在右侧显示,可视区域内共有多少用户。
GIS【百度地图API】制作网络社交地图 如何,百度地图,网络,制作 作者:洋葱头 4162
部分源代码:
  1. //显示可视区域内的标注
  2. function addMymarkers(){
  3.     document.getElementById("info").innerHTML = "小于10个用户";
  4.     var j = 0;
  5.     for(i=0;i<markers.length;i++){
  6.         var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
  7.         if(result == true && j<10) {            
  8.             map.addOverlay(markers[i]);
  9.             ++j;            
  10.         }
  11.         else if(result == true && j>=10){
  12.             ++j;
  13.             document.getElementById("info").innerHTML = "可视区域内的用户数:</br><b style='color:red;font-size:50px'>" + j + "</b>";
  14.             map.removeOverlay(markers[i]);            
  15.         }
  16.         else map.removeOverlay(markers[i]);      
  17.     }
  18. }
复制代码


发表于 2017-4-3 00:03:14 | 显示全部楼层
天下文章一大抄。
发表于 2017-4-5 07:52:03 | 显示全部楼层
GIS【百度地图API】制作网络社交地图 如何,百度地图,网络,制作 作者:大牛 1699 这个可以用来做魔友位置地图啊!
发表于 2017-5-3 21:41:41 | 显示全部楼层
谢谢分享,学习了
发表于 2018-7-19 12:24:40 | 显示全部楼层

谢谢分享,楼主辛苦
回复 支持 反对

使用道具 举报

发表于 2019-12-13 15:29:44 | 显示全部楼层
多谢楼主,极力推荐极力支持
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|关于模吧|APP下载|广告报价|小黑屋|手机版|企业会员|商城入驻|联系我们|模吧 ( 冀公网安备13080502000084号 )

© 2013-2020 Moz8.com 模吧,玩出精彩!