【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

原文:【百度地图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]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...
【百度地图API】——国内首款团购网站的地图插件
原文:[百度地图API]--国内首款团购网站的地图插件摘要: 本文介绍了一款应用在团购网站上的地图插件,适用于目前非常流行的团购网站.使用这款地图插件,无需任何编程技术,你就把商家的位置轻松地标注在 ...
百度地图API：利用瓦片生成工具，自定义背景图片
参考酸奶小妹的博文<[百度地图API]如何制作一张魔兽地图!!——CS地图也可以,哈哈哈> (http://www.cnblogs.com/milkmap/archive/2011/05/ ...
用百度地图API分析打交通大数据
百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商 ...
深入浅出百度地图API开发系列（2）：创建地图
上一篇文章里,先介绍了一下百度地图API开发所涉及到的一些基础概念,包括投影,坐标系等基础概念,再有了这些基础后,我们可以开始开发自己的web地图了.先来个代码示例(建议大家都是用百度地图API大众版 ...
layui问题之渲染数据表格时，只显示10条数据
通过ajax请求的数据,console.log()有30条数据,实际上只显示10条, 原因是没有设置limit table.render({ elem: '#report-collection' , ...
aaronyang的百度地图API之LBS云[把数据丰富显示1/3]
中国的IT 需要无私分享和贡献的人,一起努力本篇博客来自地址:http://www.cnblogs.com/AaronYang/p/3673933.html,请支持原创,未经允许不许转载一.第一步 ...
【高德地图API】Pivot控件中加载地图并禁止Pivot手势
如题,解决方案,参考[Windows phone应用开发[20]-禁止Pivot手势]http://www.cnblogs.com/chenkai/p/3408658.html. xaml代码清单 ...
Robot Framework 遇到过的错误 1. Chrome打开无法数据网址，地址栏只显示data:,
问题描述:用RF打开网页时未跳转到指定网址,而是显示data:, *** Settings ***Library SeleniumLibrary *** Test Cases ***Login_Tes ...

随机推荐

理解JavaScript的闭包
在JS这块,免不了被问什么是闭包. 从一个常见的循环问题说起. 有一个ul列表, 里面有5个li标签,我希望点击每个li标签的时候,弹出每个li标签对应的索引值(第一个弹出0,第二个弹出1...). ...
Mac OS X Yosemite安装Hadoop 2.6记录
整个安装过程分为四部分: 一. 安装Homebrew 二. ssh localhost 三. 安装Hadoop已经进行配置文件设置 (伪分布式) 四. 执行栗子一. 安装Homebrew 採用H ...
.NET 并行(多核)编程系列之七共享数据问题和解决概述
原文:.NET 并行(多核)编程系列之七共享数据问题和解决概述 .NET 并行(多核)编程系列之七共享数据问题和解决概述前言:之前的文章介绍了了并行编程的一些基础的知识,从本篇开始,将会讲述并行 ...
Reactive ExtensionsLINQ和Rx简单介绍
LINQ和Rx简单介绍相信大家都用过Language Integrated Query (LINQ),他是一种强大的工具能够从集合中提取数据.Reactive Extensions(Rx)是对LIN ...
UBuntu经常使用的操作（网络资源）
http://docs.google.com/Doc? id=dqsbw4c_46d89djccr 版权声明:本文博主原创文章.博客,未经同意不得转载.
SplashScreenDemo
对Java应用最常见的抱怨就是启动时间太长.这是因为Java虚拟机花费一段时间去加载所有必需的类,特别是对Swing应用,它们需要从Swing和AWT类库代码中去抽取大量的内容. 用户并不喜欢应用程序 ...
div+js 弹出层
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
MiniGUI文档参考手册基于v1.6.10文本
MiniGUI各种功能都分布在预先定义宏对每个文档标题.特别不方便查找,这是不利于初学者学习. 有一天,我发现doxygen,因此,使用该工具可以生成一个minigui参考文献 .基于v1.6.10文 ...
jsp、Servlet相关知识介绍(转)
1.servlet生命周期所谓生命周期,指的是servlet容器如何创建servlet实例.分配其资源.调用其方法.并销毁其实例的整个过程. 阶段一: 实例化(就是创建servlet对象,调用构造器 ...
HTML5 transform三维立方体（随着旋转的效果）
为了得到更好的把握transform精华.因此,我们决定完成三维立方体模型,可以实现360无死三维旋转作用. 但旋转更难推断每侧视图的序列.然而,完美的解决方案,我希望有人能回答. 源代码直接贡献的朋 ...

【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注的更多相关文章

随机推荐

热门专题