百度地图api点击事件及鼠标滚动缩放

谁践踏了优雅 2022-02-15 03:17 1736阅读 0赞

首先找百度拿到密钥http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey不解释，  
把ip和密钥设置好  
干货在此：

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <link rel="stylesheet"
    	href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <style type="text/css">
    html {
    	height: 100%
    }
    
    body {
    	height: 100%;
    	margin: 0px;
    	padding: 0px
    }
    
    #container {
    	height: 100%
    }
    </style>
    </head>
    
    <body>
    	<div>
    		状态说明【 <input type="checkbox" value="allstation"
    			onclick="stationchoose(1);" id="station" />所有站点 <input
    			type="checkbox" name="stationtype" value="A"
    			onclick="stationchoose(2);" />A类站点 <input type="checkbox"
    			name="stationtype" value="B" onclick="stationchoose(2);" />B类站点 <input
    			type="checkbox" name="stationtype" value="C"
    			onclick="stationchoose(2);" />C类站点 <input type="checkbox"
    			name="stationtype" value="D" onclick="stationchoose(2);" />D类站点 】
    	</div>
    	<div id="container"></div>
    </body>
    <script type="text/javascript"
    	src="http://api.map.baidu.com/api?v=2.0&ak=r8Sf8PxT4oD1liRB0CxpFE3C9FbbFf8M">
    	//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    </script>
    <script type="text/javascript"
    	src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <script type="text/javascript">
    	var map = new BMap.Map("container");// 创建地图实例  
    	var point = new BMap.Point(119.663056, 29.852344);// 创建点坐标  
    	map.centerAndZoom(point, 12);// 初始化地图，设置中心点坐标和地图级别
    	var geoc = new BMap.Geocoder();    
    	map.addControl(new BMap.NavigationControl());
    	map.addControl(new BMap.ScaleControl());
    	map.addControl(new BMap.OverviewMapControl());
    	map.addControl(new BMap.MapTypeControl());
    	
    	map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
    	map.enableKeyboard();//启动键盘操作地图
    
    	
    	function stationchoose(obj) {
    		var all = document.getElementById("station");
    		var stationtypes = document.getElementsByName("stationtype");
    		var temp = true;
    		if (obj == 1) {//
    			if (all.checked == true) {
    				for (var i = 0; i < stationtypes.length; i++) {
    					stationtypes[i].checked = "checked";
    				}
    			} else {
    				for (var i = 0; i < stationtypes.length; i++) {
    					stationtypes[i].checked = "";
    				}
    			}
    		} else {//
    			for (var i = 0; i < stationtypes.length; i++) {
    				if (stationtypes[i].checked == false) {
    					temp = false;
    					
    					break;
    				}
    			}
    			if (temp) {
    				all.checked = "checked";
    				
    			} else {
    				all.checked = "";
    				
    			}
    		}
    	}
    
    	//新建乡镇标记
    	var list = new Array();
    	var marker = new Array();
    	var point1 = new BMap.Point(119.545201, 29.902221);
    	var point2 = new BMap.Point(119.452706, 29.933319);
    	var point3 = new BMap.Point(119.620702, 29.848726);
    	var point4 = new BMap.Point(119.692964, 29.785198);
    	var point5 = new BMap.Point(119.364404, 29.854243);
    	list[0] = point1;
    	list[1] = point2;
    	list[2] = point3;
    	list[3] = point4;
    	list[4] = point5;
    	for (var i = 0; i < list.length; i++) {
    		marker[i] = new BMap.Marker(list[i]);// 创建标注
    		map.addOverlay(marker[i]);
    	}
    
    	//添加点击事件，点击某标记，地图级别变为16,并生成以该标记为中心的地图
    	//获取地名，传到后端查询数据库等等，不展示，不解释
    	map.addEventListener("click", function(e) {
    		var point = new BMap.Point(e.point.lng, e.point.lat);
    		map.centerAndZoom(point, 16);
    		//(e.point.lng + ", " + e.point.lat)地图坐标
    		//("地图缩放至：" + this.getZoom() + "级")地图缩放级别
    	});
    </script>
    </html>

个人邮箱：banxian1804@qq.com