mcattx · November 26, 2015 10:17
diff --git a/BMap.html b/BMap.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
  body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  #mapBox {
    width: 90%;
    height: 90%;
    margin: 20px auto;
  }
  #allmap {
    border-radius: 15px;
  }
  body {
    background-image: url('./symphony.png');
    background-repeat: repeat;
  }
  /*.anchorBL {display: none;}*/
  </style>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=QdWrlUoXGnfzLfn45LLkbZDp"></script>
  <!-- <script src="./bdmap.js"></script> -->
  <!-- 二次开发开源库地址 -->
  <!--http://developer.baidu.com/map/library.html  -->
  
  <title>百度地图demo</title>
 </head>
 <body>
  <div id="mapBox">
     <div id="allmap"></div>
  </div>
 
 </body>
 <script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 7);  // 初始化地图,设置中心点坐标和地图级别
  //map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
  var geoLocation = new BMap.GeolocationControl();
  map.addControl(geoLocation);//添加定位控件
  geoLocation.addEventListener('locationSuccess', function() {
    //获取主动定位后的位置信息，\
    //返回一个object形如：{"province":"广东省","city":"广州市","district":"","street":"","streetNumber":""}
    console.log(JSON.stringify(geoLocation.getAddressComponent()))
  })
  
  map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  
  // var pt = new BMap.Point(116.417, 39.909);
  // //自定义标注
  // var icon = new BMap.Icon(
  //     'http://www.yy.com/assets/images/favicon.ico',
  //     new BMap.Size(16, 16)
  //   );
  // var marker = new BMap.Marker(pt, {
  //   icon: icon
  // });
  // map.addOverlay(marker);

  // marker.addEventListener('click', function() {
  //   alert('tanchu')
  // });

  //设置一个固定位置跳排行榜
  var rankPoint = new BMap.Point(91.06, 29.36);
  var rankMarker = new BMap.Marker(rankPoint, {
    icon: new BMap.Icon('http://s2.yy.com/shenqu_mobile/images/common/yy-bear.png', new BMap.Size(100,100))
  });
   //map.addOverlay(rankMarker);

   rankMarker.addEventListener('click', function() {
     window.location.href = 'http://www.baidu.com'
   });

   //在全国各地设置若干个标注
   function addMarker(point, iconObj) {
     var marker = new BMap.Marker(point, iconObj);
     map.addOverlay(marker);
     marker.addEventListener("click", addVideoDiv);
   };

   //设置用户的标注背景
   var userIcon = new BMap.Icon(
      'http://www.yy.com/assets/images/favicon.ico',
      new BMap.Size(16, 16)
    );

   var bounds = map.getBounds();//返回地图可视区域，以地理坐标表示
   var sw = bounds.getSouthWest();
   var ne = bounds.getNorthEast();
   var lngSpan = Math.abs(sw.lng - ne.lng);//lng 是地理经度，lat 是地理纬度
   var latSpan = Math.abs(ne.lat - sw.lat);

   // for (var i = 0; i < 18; i++) {
   //   var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
   //   addMarker(point, {icon: userIcon});
   // };

   function addVideoDiv() {
     var videoHtml = [
       '<div class="videoBox">',
       '<a href="/">',
       '<img style="float:right;margin:4px" id="imgDemo" src="http://app.baidu.com/map/images/tiananmen.jpg" width="39" height="50"',
       '</a>',
       '</div>',
     ].join('\n');
     var infoWindow = new BMap.InfoWindow(videoHtml);
     this.openInfoWindow(infoWindow);
   }

  //设置地图的背景色
  // map.setMapStyle({
  //   styleJson: [
  //     {
  //       "featureType": "background",
  //       "elementType": "all",
  //       "stylers": {
  //         "color": "#fce5cd"
  //       }
  //     },
  //     {
  //       "featureType": "road",
  //       "elementType": "all",
  //       "stylers": {
  //         "color": "#f4cccc"
  //       }
  //     }
  //   ]
  // });

  map.addEventListener('zoomstart', function() {
    //alert('fangdaditu')
  })

  //设置标注的内容
  var videoHtml = '';


  //自定义一个控件，用来返回默认的尺寸和位置
  function OriginControl() {
    this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
    this.defaultOffset = new BMap.Size(10, 10);
  }

  OriginControl.prototype = new BMap.Control();
  OriginControl.prototype.initialize = function(map) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode('还原'));
    div.style.cursor = 'pointer';
    div.style.border = '1px solid gray';
    div.style.backgroundColor = 'white';
    div.onclick = function(e) {
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
    }
    map.getContainer().appendChild(div);
    return div;
  }

  var myOriginCtrl = new OriginControl();
  //map.addControl(myOriginCtrl);

 </script>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#mapBox {
	width: 90%;
	height: 90%;
	margin: 20px auto;
	}
	#allmap {
	border-radius: 15px;
	}
	body {
	background-image: url('./symphony.png');
	background-repeat: repeat;
	}
	/.anchorBL {display: none;}/
	</style>
	<script src="http://api.map.baidu.com/api?v=2.0&ak=QdWrlUoXGnfzLfn45LLkbZDp"></script>
	<!-- <script src="./bdmap.js"></script> -->
	<!-- 二次开发开源库地址 -->
	<!--http://developer.baidu.com/map/library.html -->

	<title>百度地图demo</title>
	</head>
	<body>
	<div id="mapBox">
	<div id="allmap"></div>
	</div>

	</body>
	<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap"); // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 7); // 初始化地图,设置中心点坐标和地图级别
	//map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
	var geoLocation = new BMap.GeolocationControl();
	map.addControl(geoLocation);//添加定位控件
	geoLocation.addEventListener('locationSuccess', function() {
	//获取主动定位后的位置信息，\
	//返回一个object形如：{"province":"广东省","city":"广州市","district":"","street":"","streetNumber":""}
	console.log(JSON.stringify(geoLocation.getAddressComponent()))
	})

	map.setCurrentCity("北京"); // 设置地图显示的城市此项是必须设置的
	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

	// var pt = new BMap.Point(116.417, 39.909);
	// //自定义标注
	// var icon = new BMap.Icon(
	// 'http://www.yy.com/assets/images/favicon.ico',
	// new BMap.Size(16, 16)
	// );
	// var marker = new BMap.Marker(pt, {
	// icon: icon
	// });
	// map.addOverlay(marker);

	// marker.addEventListener('click', function() {
	// alert('tanchu')
	// });

	//设置一个固定位置跳排行榜
	var rankPoint = new BMap.Point(91.06, 29.36);
	var rankMarker = new BMap.Marker(rankPoint, {
	icon: new BMap.Icon('http://s2.yy.com/shenqu_mobile/images/common/yy-bear.png', new BMap.Size(100,100))
	});
	//map.addOverlay(rankMarker);

	rankMarker.addEventListener('click', function() {
	window.location.href = 'http://www.baidu.com'
	});

	//在全国各地设置若干个标注
	function addMarker(point, iconObj) {
	var marker = new BMap.Marker(point, iconObj);
	map.addOverlay(marker);
	marker.addEventListener("click", addVideoDiv);
	};

	//设置用户的标注背景
	var userIcon = new BMap.Icon(
	'http://www.yy.com/assets/images/favicon.ico',
	new BMap.Size(16, 16)
	);

	var bounds = map.getBounds();//返回地图可视区域，以地理坐标表示
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lngSpan = Math.abs(sw.lng - ne.lng);//lng 是地理经度，lat 是地理纬度
	var latSpan = Math.abs(ne.lat - sw.lat);

	// for (var i = 0; i < 18; i++) {
	// var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
	// addMarker(point, {icon: userIcon});
	// };

	function addVideoDiv() {
	var videoHtml = [
	'<div class="videoBox">',
	'<a href="/">',
	'<img style="float:right;margin:4px" id="imgDemo" src="http://app.baidu.com/map/images/tiananmen.jpg" width="39" height="50"',
	'</a>',
	'</div>',
	].join('\n');
	var infoWindow = new BMap.InfoWindow(videoHtml);
	this.openInfoWindow(infoWindow);
	}

	//设置地图的背景色
	// map.setMapStyle({
	// styleJson: [
	// {
	// "featureType": "background",
	// "elementType": "all",
	// "stylers": {
	// "color": "#fce5cd"
	// }
	// },
	// {
	// "featureType": "road",
	// "elementType": "all",
	// "stylers": {
	// "color": "#f4cccc"
	// }
	// }
	// ]
	// });

	map.addEventListener('zoomstart', function() {
	//alert('fangdaditu')
	})

	//设置标注的内容
	var videoHtml = '';


	//自定义一个控件，用来返回默认的尺寸和位置
	function OriginControl() {
	this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
	this.defaultOffset = new BMap.Size(10, 10);
	}

	OriginControl.prototype = new BMap.Control();
	OriginControl.prototype.initialize = function(map) {
	var div = document.createElement('div');
	div.appendChild(document.createTextNode('还原'));
	div.style.cursor = 'pointer';
	div.style.border = '1px solid gray';
	div.style.backgroundColor = 'white';
	div.onclick = function(e) {
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
	}
	map.getContainer().appendChild(div);
	return div;
	}

	var myOriginCtrl = new OriginControl();
	//map.addControl(myOriginCtrl);

	</script>
	</html>