开发简单的百度地图

  1. 开发百度地图之前,首先要申请一个百度地图的密钥,这个密钥会在程序中用到. 具体的地址是http://lbsyun.baidu.com/apiconsole/key

  2. 然后就是代码部分了。下面的代码直接复制出来粘贴到记事本就可以打开。当然需要填写完整的密钥。


  3. <!DOCTYPE html>
    <html>
    	<head>
    		<title>test.html</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    		<!--这里要引入密钥-->
    		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=密钥">
    		</script>
    		<script type="text/javascript">
    			//创建百度地图
    			var creat_map = function(longitude, latitude){
    				var map = new BMap.Map("container");            // 创建地图实例  
    				var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
    				//var point = new BMap.Point(longitude,latitude);
    				var marker = new BMap.Marker(point);           // 创建标注   
    				map.centerAndZoom(point, 15);                  // 地图放大级数,数字越大,地图显示越大
    				map.enableScrollWheelZoom();    			   //启用滚轮放大缩小,默认禁用
    				map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角,仅包含平移和缩放按钮
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角,仅包含平移按钮
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角,仅包含缩放按钮
    				map.enableContinuousZoom();    				  //启用地图惯性拖拽,默认禁用
    				map.addOverlay(marker);
    				map_click(map);
    			}
    			
    			// 创建3D百度地图
    			var creat_tdMap = function(longitude, latitude){
    				var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});   //设置3D图为底图
    				var point = new BMap.Point(116.404, 39.915);
    				var marker = new BMap.Marker(point); 
    				map.setCurrentCity("北京");        // 设置地图显示的城市 此项是必须设置的
    				map.centerAndZoom(point,19);
    				map.enableScrollWheelZoom(true);   //启用滚轮放大缩小
    				map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角,仅包含平移和缩放按钮
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角,仅包含平移按钮
    				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角,仅包含缩放按钮
    				map.addOverlay(marker);
    				map_click(map);
    			}
    			
    			//地图点击事件
    			var map_click = function(map){
    				map.addEventListener("click", function(e){
    					var opts = {    
    					width : 300,     // 信息窗口宽度    
    				    height: 150,     // 信息窗口高度    
    					title : "<label style='font-size:15px;color:blue;'>*当前位置的信息*<label>"  // 信息窗口标题   
    					}    
    					var details = "Andy is so handsome!";
    					var infoWindow = new BMap.InfoWindow(details, opts);  // 创建信息窗口对象    
    					map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口   
    				}); 
    			}
    			//window.onload = creat_map;
    			//window.onload = creat_tdMap;
    
    		</script>
    		<style type="text/css">
    			#bottom, #container {float:none; width:800px; height:500px; margin:0 auto;}
    		</style>
    	</head>
    	
    	<body>
    			<div id="container"></div> 
    			<div id="bottom">
    			<input type="button" value="打开普通地图" onclick="creat_map();">
    			<input type="button" value="打开3D地图" onclick="creat_tdMap();">
    			</div>
    	</body>
    </html>

你可能感兴趣的:(开发简单的百度地图)