百度地图根据可视区域显示标注

webcode

浏览: 5945106 次
性别:
来自: 上海

最近访客更多访客>>

ap950

u012363178

wangyy

ybfjavaeye

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7533)

社区版块

存档分类

2013-02 ( 78)
2013-01 ( 83)
2012-12 ( 121)
更多存档...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="viewport" content="initial"
  <meta name="Author" content="initial-scale=1.0,user-scalable=no">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <!--设置样式，使地图充满整个浏览器窗口-->
  <style type="text/css">
   html{height:100%}
   body{height:100%;margin:0px;padding:0px}
   #container{height:100%}
   </style>
   <!--引用百度地图的api，其中v代表版本-->
   <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>
      <script type="text/javascript" src="markerclusterer.js"></script>

 </head>

 <body>
   <div id="container"></div><!--地图容器-->
   <script type="text/javascript">
     //创建一个地图实例，参数可以是元素id也可以是元素对象，其中BMap是百度地图API里面的命名空间
      var map = new BMap.Map("container");
	 map.centerAndZoom(new BMap.Point(116.404, 39.915),4);//创建一个坐标点，其中116表示经度，39表示纬度
    //创建地图实例后，必须对其进行初始化，初始化后才能进行其它的操作，该方法设置中心点坐标和地图级别
	 //map.centerAndZoom(point,16);
	 //启用轮滚进行放大缩小，默认为禁用
	 map.enableScrollWheelZoom();
	 //向地图添加控件
	 map.addControl(new BMap.NavigationControl());//平移缩放控件，默认在地图左上
	
	 //var marker=new BMap.Marker(point); //创建标注
	 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);

	 var m1 = new BMap.Marker(p1); 
	 var m2 = new BMap.Marker(p2); 
	 var m3 = new BMap.Marker(p3); 
	 var m4 = new BMap.Marker(p4); 
	 var m5 = new BMap.Marker(p5); 
	 var m6 = new BMap.Marker(p6);
	 var m7 = new BMap.Marker(p7);
	 var m8 = new BMap.Marker(p8);
	 var m9 = new BMap.Marker(p9); 
	 var m0 = new BMap.Marker(p0); 
	 var m11 = new BMap.Marker(p11); 
	 var m12 = new BMap.Marker(p12);
	 var m13 = new BMap.Marker(p13);
	 var m14 = new BMap.Marker(p14);
	 var m15 = new BMap.Marker(p15); 
	 var m16 = new BMap.Marker(p16); 
	 var m17 = new BMap.Marker(p17);
	 var m18 = new BMap.Marker(p18);
	 var m19 = new BMap.Marker(p19); 
	 var m10 = new BMap.Marker(p10); 
	 var m21 = new BMap.Marker(p21); 
	 var m22 = new BMap.Marker(p22);
	 var m23 = new BMap.Marker(p23); 
	 var m24 = new BMap.Marker(p24); 
	 var m25 = new BMap.Marker(p25); 
	 var m26 = new BMap.Marker(p26); 
	 var m27 = new BMap.Marker(p27); 
	 var m28 = new BMap.Marker(p28); 
	 var m29 = new BMap.Marker(p29); 
	 var m20 = new BMap.Marker(p20); 

     var markers=[];
	 for(var i=0;i<100;i++){
	   var pt=new BMap.Point(Math.random()*40+85,Math.random()*30+21);
	   var marker=new BMap.Marker(pt);
	   markers.push(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];

	 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]);
	   }
	  }

	 }
	   //var markerClusterer = new MarkerClusterer(map, markers);

      map.addEventListener("tilesloaded", addMymarkers);
      map.addEventListener("zoomend", addMymarkers);
      map.addEventListener("moveend", addMymarkers);
   </script>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
 </body>
 
</html>

分享到：