百度地图Marker优化方案
简介
在使用百度地图的时候，我们需要在地图上增加标注Marker来展示设置信息。随着用户需要不断增多，加载更多的Marker标注信息成为了一种奢望。然而通过自己技术的提升，归结出来了一下方案。
引入百度地图
需要在百度http://lbsyun.baidu.com/index.php?title=jspopular注册为开发者。此过程略过...
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的密钥"></script>
</head>
在页面HTML 的<head>里引入百度提供的s
实例化地图
在body中创建div
<body>
<div id="allmap" style="height: 550px;"></div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap", { enableMapClick: false });//实例化百度地图
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);//设置中心点位与缩放级别
map.enableScrollWheelZoom();//启用滚动
</script>
</body>
这样就打开HTML就可以看到页面中引入的百度地图了。
在地图中创建Marker
// 百度地图API功能
var map = new BMap.Map("allmap", { enableMapClick: false });//实例化百度地图
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);//设置中心点位与缩放级别
map.enableScrollWheelZoom();//启用滚动
var pt = null,//点位
i = 0,//
mark=null;//新标注
for(; i < 10; i++) {
pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);//随机实例point
mark=new BMap.Marker(pt);//实例marker
map.addOverlay(mark);//添加到地图上
};
现在地图上就会有10Marker标注
给地图绑定拖拽and缩放事件
//地图绑定拖拽事件
map.addEventListener('dragend', function(e){
console.log('拖拽事件');
});
//地图绑定滚动事件
map.addEventListener('zoomend', function(e){
console.log('缩放事件');
});
这样的话当地图缩放，或者拖拽时候就可以加载数据marker
获取可视区域
获取到可视区域就可以根据当前可视区域显示maker数据。这样避免不必要的marker显示出来。
var bounds = map.getBounds(), //获取可视区域
SouthWest = bounds.getSouthWest(), //可视区域左下角
NorthEast = bounds.getNorthEast(); //可视区域右上角
console.log("当前地图可视范围是：" + SouthWest.lng + "," + SouthWest.lat + "到" + NorthEast.lng + "," + NorthEast.lat);
获取我们再次请求数据的时候，判断当前marker是否存在，存在则不添加。这样的话就会提升很大的速度。
最终案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marker--标注点位优化方案</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script> </head>
<body>
<div id="allmap" style="height: 550px;"></div>
<p id='conunt'></p>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap", { enableMapClick: false });//实例化百度地图
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);//设置中心点位与缩放级别
map.enableScrollWheelZoom();//启用滚动 var markers = [];//所有marker标注集合 //console.log(markers); //地图绑定拖拽事件
map.addEventListener('dragend', function(e){
getBounds('dragend');
});
//地图绑定滚动事件
map.addEventListener('zoomend', function(e){
getBounds('zoomend');
});
/**
* 获取可视区域
* @type {string} 类型
* */
function getBounds(type){
//函数节流
if(getBounds.timer){
clearTimeout(getBounds.timer);
getBounds.timer=null;
}
getBounds.timer=setTimeout(function(){
//如果超过2000则不加载
if(markers.length>=1000){
}else{
addMarker(100);//加载500个marker
}
var bounds = map.getBounds(), //获取可视区域
SouthWest = bounds.getSouthWest(), //可视区域左下角
NorthEast = bounds.getNorthEast(); //可视区域右上角
console.log("当前地图可视范围是：" + SouthWest.lng + "," + SouthWest.lat + "到" + NorthEast.lng + "," + NorthEast.lat);
//处理显示与隐藏的marker
var data=boundsShow(SouthWest.lng,NorthEast.lng,SouthWest.lat,NorthEast.lat); //把不在可视区域的maker隐藏起来
for(var i=0,lengths=data.listhide.length;i<lengths;i++){
data.listhide[i].hide();
}
dom.innerText='共有：'+markers.length+'个点位，显示：'+data.listshow.length+'个点位';//设置地图上的marker数量
},200); }
/**
* 在可视区域显示，不在可视区域隐藏
* @smlng {number} 小 经度
* @bglng {number} 大 经度
* @smlat {number} 小纬度
* @bglat {number} 大纬度
*
* return 返回显示的数量与隐藏的数量
* */
function boundsShow(smlng,bglng,smlat,bglat){
var listhide=[],//隐藏的数据
listshow=[];//显示的数据
for(var i=0,lengths=markers.length;i<lengths;i++){
var _point=markers[i].point;
//如果marker的经度 小于可视范围的最大经度大于可视范围的最小经度--
//并且marker的纬度 小于可是范围的最大纬度大于可视范围的最小纬度--则需要显示
if(smlng<_point.lng && _point.lng<bglng && smlat<_point.lat && _point.lat < bglat){
//显示
listshow.push(markers[i]);
//如果之前被隐藏则显示
if(!markers[i].isVisible()){
markers[i].show();
}
}else{
//不显示
listhide.push(markers[i]);
}
}
//返回显示的数量与隐藏的数量
return{
listshow:listshow,
listhide:listhide
}
} /**
* 新增marker
* @MAX {number} 数量
* */
function addMarker(MAX){
dliags(true,'加载中...'); var pt = null,//点位
i = 0,//
mark=null;//新标注
for(; i < MAX; i++) {
pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);//随机实例point
mark=new BMap.Marker(pt);//实例marker
map.addOverlay(mark);//添加到地图上
markers.push(mark);//存储到数组中
};
//等待绘制引擎渲染完毕再清楚弹出层
setTimeout(function(){
dliags(false);
},0);
} /**
* 弹出层
* @state {Boolean} true:显示 or false：隐藏
* @txt {string} 显示文字
* */
function dliag(){
var dom=null;
return function(state,txt){
var dlog=null,p=null;
//如果为 true:显示
if(state){
if(dom){
document.body.appendChild(dom);
}else{
p=document.createElement('p');
p.innerText=txt;
p.style.width='100px';
p.style.height='45px';
p.style.textAlign='center';
p.style.position='absolute';
p.style.margin='auto';
p.style.zIndex='2';
p.style.left='0';
p.style.right='0';
p.style.bottom='0';
p.style.top='0';
p.style.backgroundColor='#F2F2F2';
p.style.lineHeight='45px';
p.style.borderRadius='5px'; dlog=document.createElement('div');
dlog.style.position='absolute';
dlog.style.zIndex='1';
dlog.style.margin='auto';
dlog.style.left='0';
dlog.style.right='0';
dlog.style.bottom='0';
dlog.style.top='0';
dlog.style.backgroundColor='#000';
dlog.style.opacity='0.6'; dom=document.createElement('div');
dom.appendChild(dlog);
dom.appendChild(p);
document.body.appendChild(dom);
}
}else{
document.body.removeChild(dom);
}
}
}
//弹出框
var dliags=dliag();
//添加marker
addMarker(100);
//获取conunt
var dom=document.getElementById('conunt');
//设置显示数量
dom.innerText='共有：'+markers.length+'个点位，显示：'+markers.length;
</script>
</body>
</html>
参考链接 demo
总结
在使用百度地图的时候,有时候会被百度地图限制 但是我们能优化的也只有js,能够让地图少渲染浏览器少绘制,就会把性能提升到最大化
百度地图Marker优化方案的更多相关文章
- 百度地图marker点击任意一个当前的变化，其余的marker不变
百度地图marker点击任意一个当前的变化,其余的marker不变 最近做的百度地图,遇到一个问题,就是在for循环里面执行marker的点击事件 没有可以比对的对象,每次点击marker的时候,i都 ...
- 【问题】 百度地图marker不在中心点处
问题: var map = new BMap.Map("mapshow"); map.centerAndZoom(point, 15); 显示百度地图时,map.centerAnd ...
- 百度地图-marker拖拉，右键菜单
marker拖拉,修改经纬度. //创建Map实例 var map = new BMap.Map("allmap"); var point=new BMap.Point(104.0 ...
- Android使用百度地图出现闪退及定位时显示蓝屏问题
目录 1.Android使用百度地图出现闪退 2.Android使用百度地图定位出现蓝屏问题 1.Android使用百度地图出现闪退 一般情况下出现闪退是在AndroidManifest.x ...
- 百度地图与HT for Web结合的GIS网络拓扑应用
在<HT for Web整合OpenLayers实现GIS地图应用>篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地 ...
- H5端调起百度地图、腾讯地图app
来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在 ...
- 百度地图点聚合MarkerClusterer，性能优化
参考文献:http://www.cnblogs.com/lightnull/p/6184867.html 百度的点聚合算法 是基于方格和距离的聚合算法,即开始的时候地图上没有任何已知的聚合点,然后遍历 ...
- 【百度地图API】今日小年大进步，齐头共进贺佳节——API优化升级上线，不再增加内存消耗
原文:[百度地图API]今日小年大进步,齐头共进贺佳节--API优化升级上线,不再增加内存消耗 任务描述: 今天是2011年01月26日,小年夜.百度地图API在小年夜献给广大API爱好者一份给力的礼 ...
- 百度地图点聚合MarkerClusterer性能优化
公司要求做个百度地图点聚合的性能优化,需一次性加载9万条数据. 记录下自己的优化过程.(只想看优化代码的可直接移步:步骤三) 一.引入百度地图 vue项目中,在index.html文件中用script ...
随机推荐
- I/P/B/SI/SP帧和PTS/DTS的关系
I frame:帧内编码帧 又称intra picture,I 帧通常是每个 GOP(MPEG 所使用的一种视频压缩技术)的第一个帧,经过适度地压缩,做为随机访问的参考点,可以当成图象.I帧可以看成是 ...
- java web 学习总结之 Servlet/JSP 编码问题
Servlet和JSP编码问题 字节流: 1.得到OutputStream 字节流 OutputStream os = response.getOutputStream(); 用默认编码输出数据 ...
- SQL Server2008安装教程
SQL Server2008安装教程 第一步,打开文件,点击开始安装: 第二步,打开后点击左边项的安装,选择右边第一项: 第三步,点击确定: 第四步,选择接受服务条款,点击下一步: 第五步,按着一 ...
- 通信技术：SSE设计方案（一）--- 前端Server-Sent Events概念讲解和基础类库完善发布
好了,开篇还是要扯扯的,否则感觉这个技术讲的么有那么冻人,嗯,这个晚上是有点冷了,秋衣秋裤大家都该加起来了,反正我不帮你买,妹子除外,嘻嘻. 之前几篇博客,研究前端通信技术的第一层ajax技术,从最基 ...
- 运用 finereport 和 oracle 结合开发报表思路大总结
近排自己学习了一款软件finereport开发报表模块,自己总结了如何了解需求,分析需求,再进行实践应用开发,最后进行测试数据的准确性,部署报表到项目对应的模块中显示. 一.需求(根据需求文档分析) ...
- CSS滤镜效果
使用 filter: blur() 生成毛玻璃效果 使用 filter: drop-shadow() 生成整体阴影效果 使用 filter: opacity() 生成透明度 blur生成阴影 通常我们 ...
- win10 uwp 绑定多数据
经常我们需要绑定的数据有多个,当添加到集合控件的对象类型结构比较复杂,我们希望自己来定义排版布局,这时可以使用ItemTemplate用资源的定义 现在有数据 public class caddres ...
- UVa1605,Building for UN
我比较好奇的是uva后台是怎么测这题的 没什么可说的,那些不想敲但还是想直接交这题的直接copy过去吧 #include <iostream> #include <cstring&g ...
- 怎么样防止Sql注入
(1)对于动态构造SQL查询的场合,可以使用下面的技术: 第一:替换单引号,即把所有单独出现的单引号改成两个单引号,防止攻击者修改SQL命令的含义.再来看前面的例子,“SELECT * from Us ...
- zabbix杂文
ps:这是从我原来记录的地方直接copy的,很杂乱,不过主要我想记录当时的思路,乱就乱了...... 背景: 这是进公司的第一个正式任务(之前在测试环境熟悉),所以基本上最近一段时间都在弄这个东西,一 ...