开发简单的百度地图

最新推荐文章于 2024-07-30 22:36:34 发布

chuoni8848

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量67

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/1996558/blog/341559

版权

开发百度地图之前，首先要申请一个百度地图的密钥，这个密钥会在程序中用到. 具体的地址是http://lbsyun.baidu.com/apiconsole/key
然后就是代码部分了。下面的代码直接复制出来粘贴到记事本就可以打开。当然需要填写完整的密钥。

<!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>

转载于:https://my.oschina.net/u/1996558/blog/341559

chuoni8848

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
开发简单的百度地图

开发百度地图之前，首先要申请一个百度地图的密钥，这个密钥会在程序中用到. 具体的地址是http://lbsyun.baidu.com/apiconsole/key 然后就是代码部分了。下面的代码直接复制出来粘贴到记事本就可以打开。当然需要填写完整的密钥。 <!DOCTYPE...
复制链接

扫一扫