百度地图控件的摆放、显示和自定义控件

落日映苍穹つ 2021-07-24 14:26 518阅读 0赞

[教程地址][Link 1]

代码示例

<html>
    <head>
    	<meta charset="utf-8">
    	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
    	<title></title>
    	<script src='js/underscore.js'></script>
    	
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=P4GOUWzDBOXMq8sBRabiMTFygL2ltEg7"></script>
    	<style>
    	 html{ height:100%}    
        body{ height:100%;margin:0px;padding:0px}    
      	  #map{ height:500px;width:700px;border: solid 1px black;}   
    	</style>
    </head>
    <body>
    	
    	<div id="map"></div> 
    	<button>点我加载地图</button>
    
    	<script>
    	document.querySelector('button').onclick=function()
    	{ 
    		// 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id值也可以是元素对象。
    		var map = new BMap.Map("map"); 
    
    		//经纬度设置中心点
    		var point = new BMap.Point(116.404, 39.915);
    		//103.907379, 30.805303
    
    		//地图初始化，同时设置地图展示级别(1-21),15解决展示街道级别
    		map.centerAndZoom(point,15);  
    
    		// map.addControl(new BMap.NavigationControl());
    		// map.addControl(new BMap.OverviewMapControl());
    		// map.addControl(new BMap.MapTypeControl()); 
    
    		//自定义系统控件的位置
    		//anchor:控件摆放位置
    		//offset:控件细节偏移位置
    		//type:控件加载部分
    		var options={ 
    			//表示摆放位置在右下角
    			anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
    			//表示在右下角偏移细节(x,y)坐标
    			offset:new BMap.Size(150, 5),
    			//加载控件哪部分
    			type:BMAP_NAVIGATION_CONTROL_SMALL 
    			
    		}
    
    	// //加载系统控件,将定制信息作为参数传入创建的控件中
    	// map.addControl(new BMap.MapTypeControl(options))
    
    
    	// //自定义系统控件 
    	// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回 
    // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中 
    	//3.自定义控件
    		// 定义一个控件类，即function 
    		function Fangda(){     
    		    // 设置默认停靠位置和偏移量 
    		    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
    		    this.defaultOffset = new BMap.Size(10, 10);    
    		}    
    		// 通过JavaScript的prototype属性继承于BMap.Control 
    		Fangda.prototype = new BMap.Control();
    		// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回 
    		// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中 
    		Fangda.prototype.initialize = function(map){     
    		    // 创建一个DOM元素 
    		    var div = document.createElement("div");    
    		    // 添加文字说明 
    		    div.appendChild(document.createTextNode("放大2级"));    
    		    // 设置样式 
    		    div.style.cursor = "pointer";    
    		    div.style.border = "1px solid gray";    
    		    div.style.backgroundColor = "white";    
    		    // 绑定事件，点击一次放大两级 
    		    div.onclick = function(e){   
    		        map.zoomTo(myMap.getZoom() + 2);    
    		    }    
    		    // 添加DOM元素到地图中 
    		    map.getContainer().appendChild(div);    
    		    // 将DOM元素返回 
    		    return div;    
    		 }
    		// 添加到地图当中 
    		map.addControl(new Fangda());
    		}
    	</script>
    	
    </body>
    
    </html>

[Link 1]: http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/widget