百度地图Api进阶教程-创建标注和自定义标注3.html

长平狐 发布于 2013/01/06 11:32
阅读 2K+
收藏 0
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>


<script type="text/javascript">

	function initialize() {
		//---------------------------------------------基础示例---------------------------------------------
		var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例
		//map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时,即可设置中心点和地图缩放级别。
		map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。
		map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动
		
		map.addEventListener("click", function(e){
			document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat;
		});
		//---------------------------------------------遮盖物---------------------------------------------
		 var point = new BMap.Point(104.117287, 30.685906);//默认
		 // 创建标注对象并添加到地图  
		 var marker = new BMap.Marker(point);  
		 map.addOverlay(marker);  

		 
		var point = new BMap.Point(104.057287, 30.685906);//图片
		var myIcon = new BMap.Icon("http://t3.baidu.com/it/u=1119318591,884730191&fm=0&gp=0.jpg", new BMap.Size(55, 55));    
		 // 创建标注对象并添加到地图  
		 var marker = new BMap.Marker(point, {icon: myIcon});  
		 map.addOverlay(marker);  

		 //自定义遮盖物
		// 定义自定义覆盖物的构造函数  
		 var point = new BMap.Point(104.117287, 30.695906);//自定义遮盖物
		function SquareOverlay(point, length, color){  
			this._point = point;  
			this._length = length;  
			this._color = color;  
		}  
		// 继承API的BMap.Overlay  
		SquareOverlay.prototype = new BMap.Overlay();  

		// 实现初始化方法  
		SquareOverlay.prototype.initialize = function(map){  
			// 保存map对象实例  
			 this._map = map;      
			 // 创建div元素,作为自定义覆盖物的容器  
			 var div = document.createElement("div");  
			 div.style.position = "absolute";      
			 // 可以根据参数设置元素外观  
			 div.style.width = this._length + "px";  
			 div.style.height = this._length + "px";  
			 div.style.background = this._color;    
			 // 将div添加到覆盖物容器中  
			 map.getPanes().markerPane.appendChild(div);    
			 // 保存div实例 
			 this._div = div;    
			 // 需要将div元素作为方法的返回值,当调用该覆盖物的show、  
			 // hide方法,或者对覆盖物进行移除时,API都将操作此元素。  
			 return div;  
		}
		// 实现绘制方法  (您需要在draw方法中设置覆盖物的位置,每当地图状态发生变化(比如:位置移动、级别变化)时,API都会调用覆盖物的draw方法,用于重新计算覆盖物的位置)
		SquareOverlay.prototype.draw = function(){  

			  var position = map.pointToOverlayPixel(this._point);
			  this._div.style.left = position.x - this._length / 2 + "px";  
			  this._div.style.top = position.y - this._length / 2 + "px";  
		}
		// 实现显示方法  
		SquareOverlay.prototype.show = function(){  
			 if (this._div){  
				this._div.style.display = "";  
			 }  
		}    
		// 实现隐藏方法  
		SquareOverlay.prototype.hide = function(){  
			 if (this._div){  
				this._div.style.display = "none";  
			 }  
		}
		// 添加自定义覆盖物  
		var mySquare = new SquareOverlay(point, 22, "red");  
		map.addOverlay(mySquare);
	}
 
	function loadScript() {
	   var script = document.createElement("script");
	   script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
	   document.body.appendChild(script);
	}
 
	window.onload = loadScript;
</script>


</head>
 <body>
	<div id="r-result" style="float:left;width:100px;">打印坐标</div>
	<div id="allmap" style="width: 800px; height: 500px"></div>
</body>
</html>

<script type="text/javascript">
	// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));  
	 // map.setZoom(14);   //放到到14级
</script>


原文链接:http://blog.csdn.net/sd0902/article/details/8471322
加载中
返回顶部
顶部