700字范文 > 百度地图高级实例2-如何利用自己的数据制作社交地图？只显示可视区域内的标注

百度地图高级实例2-如何利用自己的数据制作社交地图？只显示可视区域内的标注

时间：2023-11-12 21:56:53

摘要：如果你自己的数据已经超过1万个，如何进行合理的显示？除了聚合marker外，还有一个办法。那就是，只显示可视区域内的标注。

--------------------------------------------------------------------------------------------------------------

成品图：

工具描述：

移动地图时（或改变地图级别时），只显示可视区域内的标注。非可视区域内的标注都移除。

这样可以保持高效的系统性能。

另外，可视区域内的标注，请保持在200以内。各类浏览器方能高效地显示。

如果有超过300个marker，建议使用聚合marker类，请参考LIB：/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：/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>

</head>

<body>

</body>

</html>

//创建地图

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张图标