摘要：如果你自己的数据已经超过1万个，如何进行合理的显示？除了聚合marker外，还有一个办法。那就是，只显示可视区域内的标注。
--------------------------------------------------------------------------------------------------------------
工具描述：
移动地图时（或改变地图级别时），只显示可视区域内的标注。非可视区域内的标注都移除。
这样可以保持高效的系统性能。
另外，可视区域内的标注，请保持在200以内。各类浏览器方能高效地显示。
如果有超过300个marker，建议使用聚合marker类，请参考LIB：
1、从数据库里读取信息
数据库里需要存储的信息至少为：经纬度point，标注图片icon。
读取后，创建点、标注。（注意：只是创建标注，并不添加到地图上。）
//创建10个点var p1 = new BMap.Point(116..947302);var p2 = new BMap.Point(116..961129);var p3 = new BMap.Point(116..960133);var p4 = new BMap.Point(116..919528);var p5 = new BMap.Point(116..939557);var p6 = new BMap.Point(116..974511);var p7 = new BMap.Point(116..974511);var p8 = new BMap.Point(116..930484);var p9 = new BMap.Point(116.103);var p0 = new BMap.Point(116..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：
判断标注如果在可视区域内，则添加到地图上；如果标注不在可视区域内，则删除它。
判断代码：
//显示可视区域内的标注function addMymarkers(){
for(i=0;i&markers.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..020499),
new BMap.Point(116..833259),
new BMap.Point(116..830599),
new BMap.Point(116..021383),
new BMap.Point(116..020499)], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});map.addOverlay(polyline);
本例全部源代码：
&!DOCTYPE html&&html&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&社交地图&/title&&script type="text/javascript" src="http://api./api?v=1.2"&&/script&&script type="text/javascript" src="http://api./library/GeoUtils/1.2/src/GeoUtils_min.js"&&/script&&/head&&body&&div style="width:520height:340border:1px solid gray" id="container"&&/div&&div style="width:200height:340border: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.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&
&更新代码：修改addMymarkers函数。
当可视区域内的标注大于10的时候，只显示10个标注。并在右侧显示，可视区域内共有多少用户。
部分源代码：
//显示可视区域内的标注function addMymarkers(){
document.getElementById("info").innerHTML = "小于10个用户";
var j = 0;
for(i=0;i&markers.i++){
var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
if(result == true && j&10) {
map.addOverlay(markers[i]);
else if(result == true && j&=10){
document.getElementById("info").innerHTML = "可视区域内的用户数：&/br&&b style='color:font-size:50px'&" + j + "&/b&";
map.removeOverlay(markers[i]);
else map.removeOverlay(markers[i]);
阅读(...) 评论()&&问题详情
我在百度地图上标注的商户已通过并已生效两个多月了,前几天帐号显示客服删除,请教
5e38dfb601c67f8
石家庄洁美佳保洁公司（祥云国际分店）
石家庄市桥西区中华大街与南二环祥云国际
重新申请 删除
您的回答过短，请将答案描述得更清楚一些
回答被采纳后将获得系统奖励20
手机动态登录
请输入用户名/邮箱/手机号码！
请输入密码！
Copyright &
Shang Hai Jing Rong Xin Xi Ke Ji You Xian Gong Si
上海旌荣信息科技有限公司 版权所有
客服电话： 400-850-8888 违法信息举报邮箱：你是不是看过很多房产网站？例如安居客，新浪乐居。
你是不是也想做一个能写文字的标注？
你知道怎么去实现麼?
其实，上图这样的标注是一个&自定义覆盖物&。你可以任意指定它的样式，文字，图片等等。
首先，我需要初始化地图：
var mp = new BMap.Map("map_container");var point = new BMap.Point(116.3964,39.9093);mp.centerAndZoom(point,15);
然后，我建立两个自定义覆盖物：
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101), "天安门东");var myCompOverlay2 = new ComplexCustomOverlay(new BMap.Point(116.406946,39.911403), "国家博物馆");
对自定义覆盖物定义：（包括样式、图片、位置偏移等等）
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text){
this._point =
this._text =
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map =
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#EE5D5B";
div.style.border = "1px solid #BC3B3A";
div.style.color = "white";
div.style.height = "18px";
div.style.padding = "2px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px"
div.appendChild(document.createTextNode(this._text));
var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
div.onmouseover = function(){
this.style.backgroundColor = "#6BADCA";
this.style.borderColor = "#0000ff";
arrow.style.backgroundPosition = "0px -20px";
div.onmouseout = function(){
this.style.backgroundColor = "#EE5D5B";
this.style.borderColor = "#BC3B3A";
arrow.style.backgroundPosition = "0px 0px";
mp.getPanes().labelPane.appendChild(div);
ComplexCustomOverlay.prototype.draw = function(){
var map = this._
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top
= pixel.y - 30 + "px";
最后，在地图上把它们添加上来。
mp.addOverlay(myCompOverlay);mp.addOverlay(myCompOverlay2);
运行示例，请点击：
阅读(...) 评论()你好 为什么我在百度地图标注审核通过了在地图上还找不到？_百度知道
你好 为什么我在百度地图标注审核通过了在地图上还找不到？
腾讯地图的上传快的换手机导航软件就可以腾讯地图导航不错的手机导航软件腾讯地图进行游玩路线的查询定位精准穿氦扁教壮寄憋犀铂篓、快速、省流量浏览地图、搜索地点、查询公交和导航，
其他类似问题
为您推荐：
少女时代的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁