微科社区,轻松开发从此开始! 请登陆 免费注册

微科社区

当前位置:首页 > 企业开发 > GIS >

【百度地图API】如何利用自己的数据制作社交地

时间:2016-12-23 04:01  浏览:努力统计中...
摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法。那就是, 只显示可视区域内的标注 。 -----------------------------------------------------------

摘要:如果你自己的数据已经超过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});

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线------