【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注...
摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法。那就是,只显示可视区域内的标注。
--------------------------------------------------------------------------------------------------------------
成品图:
工具描述:
移动地图时(或改变地图级别时),只显示可视区域内的标注。非可视区域内的标注都移除。
这样可以保持高效的系统性能。
另外,可视区域内的标注,请保持在200以内。各类浏览器方能高效地显示。
如果有超过300个marker,建议使用聚合marker类,请参考LIB:http://dev.baidu.com/wiki/map/index.php?title=MapLibrary
1、从数据库里读取信息
数据库里需要存储的信息至少为:经纬度point,标注图片icon。
读取后,创建点、标注。(注意:只是创建标注,并不添加到地图上。)
//创建10个点var p1 = new BMap.Point(116.387452,39.947302);var p2 = new BMap.Point(116.361581,39.961129);var p3 = new BMap.Point(116.437901,39.960133);var p4 = new BMap.Point(116.459748,39.919528);var p5 = new BMap.Point(116.424247,39.939557);var p6 = new BMap.Point(116.485188,39.974511);var p7 = new BMap.Point(116.485188,39.974511);var p8 = new BMap.Point(116.494243,39.930484);var p9 = new BMap.Point(116.45328,39.884103);var p0 = new BMap.Point(116.456011,39.844671); //创建10张图标var icon1 = new BMap.Icon("img/1.jpg", new BMap.Size(50,50));var icon2 = new BMap.Icon("img/2.jpg", new BMap.Size(50,50));var icon3 = new BMap.Icon("img/3.jpg", new BMap.Size(50,50));var icon4 = new BMap.Icon("img/4.jpg", new BMap.Size(50,50));var icon5 = new BMap.Icon("img/5.jpg", new BMap.Size(50,50));var icon6 = new BMap.Icon("img/6.jpg", new BMap.Size(50,50));var icon7 = new BMap.Icon("img/7.jpg", new BMap.Size(50,50));var icon8 = new BMap.Icon("img/8.jpg", new BMap.Size(50,50));var icon9 = new BMap.Icon("img/9.jpg", new BMap.Size(50,50));var icon0 = new BMap.Icon("img/0.jpg", new BMap.Size(50,50)); //创建10个marker,但不添加到地图上var m1 = new BMap.Marker(p1,{icon:icon1}); var m2 = new BMap.Marker(p2,{icon:icon2}); var m3 = new BMap.Marker(p3,{icon:icon3}); var m4 = new BMap.Marker(p4,{icon:icon4}); var m5 = new BMap.Marker(p5,{icon:icon5}); var m6 = new BMap.Marker(p6,{icon:icon6}); var m7 = new BMap.Marker(p7,{icon:icon7}); var m8 = new BMap.Marker(p8,{icon:icon8}); var m9 = new BMap.Marker(p9,{icon:icon9}); var m0 = new BMap.Marker(p0,{icon:icon0});
为了方便运算,用一个数组将标注集合起来:
//建立一个marker的数组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
判断标注如果在可视区域内,则添加到地图上;如果标注不在可视区域内,则删除它。
判断代码:
//显示可视区域内的标注function addMymarkers(){for(i=0;i<markers.length;i++){var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());if(result == true) map.addOverlay(markers[i]);else map.removeOverlay(markers[i]); }}
3、将可视区域内的标注添加到地图上
在图块加载完毕,地图中心点改变,和地图级别改变时,都需要进行一次添加/移除标注的操作。
//对地图级别变化、移动结束和图块加载完毕后,进行添加marker的操作map.addEventListener("tilesloaded", addMymarkers);map.addEventListener("zoomend", addMymarkers);map.addEventListener("moveend", addMymarkers);
4、给标注的区域画一个框
为了方便观看,我用的是折线覆盖物,你也可以使用多边形覆盖物。
//添加一个矩形覆盖物var polyline = new BMap.Polyline([new BMap.Point(116.279655,40.020499),new BMap.Point(116.260683,39.833259),new BMap.Point(116.532043,39.830599),new BMap.Point(116.526869,40.021383),new BMap.Point(116.279655,40.020499)], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});map.addOverlay(polyline);
本例全部源代码:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>社交地图</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script><script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script></head><body><div style="width:520px;height:340px;border:1px solid gray" id="container"></div><div style="width:200px;height:340px;border:1px solid gray" id="info"></div><p id="info"></p></body></html><script type="text/javascript">//创建地图var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.387452,39.947302), 13); //添加一个矩形覆盖物var polyline = new BMap.Polyline([new BMap.Point(116.279655,40.020499),new BMap.Point(116.260683,39.833259),new BMap.Point(116.532043,39.830599),new BMap.Point(116.526869,40.021383),new BMap.Point(116.279655,40.020499)], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});map.addOverlay(polyline); //显示可视区域内的标注function addMymarkers(){ document.getElementById("info").innerHTML = '';for(i=0;i<markers.length;i++){var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());if(result == true) map.addOverlay(markers[i]);else map.removeOverlay(markers[i]); document.getElementById("info").innerHTML += '<img src="' + markers[i].getIcon().imageUrl +'" />'; }}
//对地图级别变化、移动结束和图块加载完毕后,进行添加marker的操作map.addEventListener("tilesloaded", addMymarkers);map.addEventListener("zoomend", addMymarkers);map.addEventListener("moveend", addMymarkers); //创建30个点var p1 = new BMap.Point(116.387452,39.947302);var p2 = new BMap.Point(116.361581,39.961129);var p3 = new BMap.Point(116.437901,39.960133);var p4 = new BMap.Point(116.459748,39.919528);var p5 = new BMap.Point(116.424247,39.939557);var p6 = new BMap.Point(116.485188,39.974511);var p7 = new BMap.Point(116.485188,39.974511);var p8 = new BMap.Point(116.494243,39.930484);var p9 = new BMap.Point(116.45328,39.884103);var p0 = new BMap.Point(116.456011,39.844671); var p11 = new BMap.Point(116.387165,39.850654);var p12 = new BMap.Point(116.461185,39.8975);var p13 = new BMap.Point(116.380122,39.87458);var p14 = new BMap.Point(116.354395,39.899825);var p15 = new BMap.Point(116.394495,39.887093);var p16 = new BMap.Point(116.30524,39.902482);var p17 = new BMap.Point(116.287992,39.937676);var p18 = new BMap.Point(116.277931,39.911116);var p19 = new BMap.Point(116.340166,39.929267);var p10 = new BMap.Point(116.290004,39.965885); var p21 = new BMap.Point(116.377535,39.966548);var p22 = new BMap.Point(116.423672,39.95239);var p23 = new BMap.Point(116.423672,39.95239);var p24 = new BMap.Point(116.300353,40.003146);var p25 = new BMap.Point(116.294172,39.982251);var p26 = new BMap.Point(116.313432,39.977497);var p27 = new BMap.Point(116.390183,39.983357);var p28 = new BMap.Point(116.390183,39.983357);var p29 = new BMap.Point(116.484469,39.943872);var p20 = new BMap.Point(116.509191,39.932586); //创建30张图标var icon1 = new BMap.Icon("img/1.jpg", new BMap.Size(50,50));var icon2 = new BMap.Icon("img/2.jpg", new BMap.Size(50,50));var icon3 = new BMap.Icon("img/3.jpg", new BMap.Size(50,50));var icon4 = new BMap.Icon("img/4.jpg", new BMap.Size(50,50));var icon5 = new BMap.Icon("img/5.jpg", new BMap.Size(50,50));var icon6 = new BMap.Icon("img/6.jpg", new BMap.Size(50,50));var icon7 = new BMap.Icon("img/7.jpg", new BMap.Size(50,50));var icon8 = new BMap.Icon("img/8.jpg", new BMap.Size(50,50));var icon9 = new BMap.Icon("img/9.jpg", new BMap.Size(50,50));var icon0 = new BMap.Icon("img/0.jpg", new BMap.Size(50,50)); var icon11 = new BMap.Icon("img/11.jpg", new BMap.Size(50,50));var icon12 = new BMap.Icon("img/12.jpg", new BMap.Size(50,50));var icon13 = new BMap.Icon("img/13.jpg", new BMap.Size(50,50));var icon14 = new BMap.Icon("img/14.jpg", new BMap.Size(50,50));var icon15 = new BMap.Icon("img/15.jpg", new BMap.Size(50,50));var icon16 = new BMap.Icon("img/16.jpg", new BMap.Size(50,50));var icon17 = new BMap.Icon("img/17.jpg", new BMap.Size(50,50));var icon18 = new BMap.Icon("img/18.jpg", new BMap.Size(50,50));var icon19 = new BMap.Icon("img/19.jpg", new BMap.Size(50,50));var icon10 = new BMap.Icon("img/10.jpg", new BMap.Size(50,50)); var icon21 = new BMap.Icon("img/21.jpg", new BMap.Size(50,50));var icon22 = new BMap.Icon("img/22.jpg", new BMap.Size(50,50));var icon23 = new BMap.Icon("img/23.jpg", new BMap.Size(50,50));var icon24 = new BMap.Icon("img/24.jpg", new BMap.Size(50,50));var icon25 = new BMap.Icon("img/25.jpg", new BMap.Size(50,50));var icon26 = new BMap.Icon("img/26.jpg", new BMap.Size(50,50));var icon27 = new BMap.Icon("img/27.jpg", new BMap.Size(50,50));var icon28 = new BMap.Icon("img/28.jpg", new BMap.Size(50,50));var icon29 = new BMap.Icon("img/29.jpg", new BMap.Size(50,50));var icon20 = new BMap.Icon("img/20.jpg", new BMap.Size(50,50)); //创建30个marker,但不添加到地图上var m1 = new BMap.Marker(p1,{icon:icon1}); var m2 = new BMap.Marker(p2,{icon:icon2}); var m3 = new BMap.Marker(p3,{icon:icon3}); var m4 = new BMap.Marker(p4,{icon:icon4}); var m5 = new BMap.Marker(p5,{icon:icon5}); var m6 = new BMap.Marker(p6,{icon:icon6}); var m7 = new BMap.Marker(p7,{icon:icon7}); var m8 = new BMap.Marker(p8,{icon:icon8}); var m9 = new BMap.Marker(p9,{icon:icon9}); var m0 = new BMap.Marker(p0,{icon:icon0}); var m11 = new BMap.Marker(p11,{icon:icon11}); var m12 = new BMap.Marker(p12,{icon:icon12}); var m13 = new BMap.Marker(p13,{icon:icon13}); var m14 = new BMap.Marker(p14,{icon:icon14}); var m15 = new BMap.Marker(p15,{icon:icon15}); var m16 = new BMap.Marker(p16,{icon:icon16}); var m17 = new BMap.Marker(p17,{icon:icon17}); var m18 = new BMap.Marker(p18,{icon:icon18}); var m19 = new BMap.Marker(p19,{icon:icon19}); var m10 = new BMap.Marker(p10,{icon:icon10}); var m21 = new BMap.Marker(p21,{icon:icon21}); var m22 = new BMap.Marker(p22,{icon:icon22}); var m23 = new BMap.Marker(p23,{icon:icon23}); var m24 = new BMap.Marker(p24,{icon:icon24}); var m25 = new BMap.Marker(p25,{icon:icon25}); var m26 = new BMap.Marker(p26,{icon:icon26}); var m27 = new BMap.Marker(p27,{icon:icon27}); var m28 = new BMap.Marker(p28,{icon:icon28}); var m29 = new BMap.Marker(p29,{icon:icon29}); var m20 = new BMap.Marker(p20,{icon:icon20}); //建立一个marker的数组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];</script>
2012-02-07 更新代码:修改addMymarkers函数。
当可视区域内的标注大于10的时候,只显示10个标注。并在右侧显示,可视区域内共有多少用户。
部分源代码:
//显示可视区域内的标注function addMymarkers(){ document.getElementById("info").innerHTML = "小于10个用户";var j = 0;for(i=0;i<markers.length;i++){var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());if(result == true && j<10) { map.addOverlay(markers[i]); ++j; }else if(result == true && j>=10){ ++j; document.getElementById("info").innerHTML = "可视区域内的用户数:</br><b style='color:red;font-size:50px'>" + j + "</b>"; map.removeOverlay(markers[i]); }else map.removeOverlay(markers[i]); }}
【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注...相关推荐
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注 ...
- 百度地图高级实例2-如何利用自己的数据制作社交地图?只显示可视区域内的标注
摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注. ----------------------------------- ...
- 如何利用自己的数据制作社交地图?只显示可视区域内的标注
地址:http://www.cnblogs.com/milkmap/archive/2012/02/02/2335989.html [百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的 ...
- 【百度地图API】如何判断点击的是地图还是覆盖物?
原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...
- 高德地图-2D地图下区域遮掩(只显示固定区域里的内容)
最近遇到一个新的需求需用用到高德地图 公司需要只显示固定区域范围的地图,其余地方的地图都用透明遮罩覆盖 完成后如下图所示: 地图体验网址 刚开始的时候研究了半天高德地图的的JS API中只有一个区域遮 ...
- 高德地图只显示部分区域
直接上代码吧 高德地图只能到最大到市级,也就是如果只显示一个县或者区的话只有想其他的办法 <div id="mountNode"></div> <sc ...
- 解决高德地图锁屏黑屏定位不更新,高德地图绘制定位轨迹,高德定位判断定位停留点,高德地图将所有坐标绘制在可视区域内
本文章主要介绍 高德定位锁屏黑屏定位不更新的问题. 实现流程是:程序开始阶段正常执行定位,注册监听锁屏监听,唤醒cpu监听,当锁屏 广播每2秒发起一起单次定位唤醒.源码如下: package net. ...
- 高德地图获取可视区域内四角坐标(东北,东南,西南,西北)
高德地图获取可视区域内四角坐标(东北,东南,西南,西北) 场景:当需要实现查询某坐标区域内的所有共享单车,那么常规操作就是把所选区域内的左上和右下两点经纬度给到后端.获取方法如下: // 初始化地图m ...
- 用百度地图API分析打交通大数据
百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商 ...
最新文章
- linux ftp随机端口,linuxFTP生产环境配置
- StingBuffer
- Runtime.getRuntime().exec(...)使用方法
- python中字符串的几种表达方式(用什么方式表示字符串)
- 洛谷P3295 [SCOI2016]萌萌哒(倍增+并查集)
- python找房源_python抓取贝壳房源信息
- ai圆角插件_【干货满满】AI软件技巧排版所需
- Mysql(一)——基础知识
- linux如何创建共享内存,linux实现共享内存同步的四种方法
- 一个值得思考的赚钱模式
- EventBus,轻松实现跨组件跨线程通信
- Cesium知识点:根据经纬度获取高程
- 手机图片怎么加水印?只需三步即可完成
- R9000P电脑win10系统常用快捷键及使用技巧
- 七夕表白攻略:原来数学才是世界上最浪漫的学科!
- 数论(继续补充)(gcd + lcm + qpow + prime+qmul)
- 优雅java代码效率提高的习惯(一)
- python中shutil是什么意思,很多关于shutil的错误,说文件在Python中时不存在
- 苹果、安卓ASO优化,aso安卓苹果(二)
- linux 下文件夹无法删除(报:Device or resource busy),然后进入文件夹也无法创建新的文件夹(Permission denied)