百度地图

114 阅读1分钟
<!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>  
		<style type="text/css">  
		html{height:100%}  
		body{height:100%;margin:0px;padding:0px}  
		#container{height:100%}  
		</style>  
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=1yGIc901IHvG65b3jGUu5nrkWUOYpT3c"></script>
	</head>  
 
	<body>  
		<div id="container"></div> 
		<script type="text/javascript"> 
			var map = new BMap.Map("container");
			// 创建地图实例  
			var point = new BMap.Point(119.306239,26.075302);//福州的经纬度
			// 创建点坐标  
			map.centerAndZoom(point, 10);
			// 初始化地图,设置中心点坐标和地图级别 
			map.enableScrollWheelZoom();
			var marker = new BMap.Marker(point);        // 创建标注    
			map.addOverlay(marker);                     // 将标注添加到地图中 
			marker.enableDragging();    
			marker.addEventListener("dragend", function(e){    
				alert("当前位置:" + e.point.lng + ", " + e.point.lat);    
			}) 
		</script>  
	</body>  
</html>

全图显示地区在这里插入图片描述 展示公司地址

<!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>  
		<style type="text/css">  
		html{height:100%}  
		body{height:100%;margin:0px;padding:0px}  
		#container{height:100%}  
		</style>  
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=1yGIc901IHvG65b3jGUu5nrkWUOYpT3c"></script>
	</head>  
 
	<body>  
		<div id="container"></div> 
		<script type="text/javascript"> 
			var map = new BMap.Map("container");
			// 创建地图实例  
			var point = new BMap.Point(119.306239,26.075302);
			// 创建点坐标  
			map.centerAndZoom(point, 16);
			// 初始化地图,设置中心点坐标和地图级别 
			map.enableScrollWheelZoom();
	
			var opts = {    
				width : 500,     // 信息窗口宽度    
				height: 160     // 信息窗口高度    
			}    
			var content = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>福州</h4>" + 
	"<img style='float:right;margin:4px' id='imgDemo' src='https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=562e2995b7aa3f1a930cf0eb447edace&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2F1b4c510fd9f9d72a25c62d9bd62a2834359bbb91.jpg' width='139' height='104' title='福州'/>" + 
	"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'><a href='#'>福州,简称“榕”,别称榕城,是福建省省会,国务院批复确定的中国海峡西岸经济区中心城市之一、滨江滨海生态园林城市 [1]  。截至2019年,全市下辖6个区、6个县、和1个县级市,总面积11968平方千米,建成区面积416平方公里 [2-3]  , 闽东语福州话为主要方言,并存闽南语闽南话、莆仙话等多种方言。 [118-121]  截至2020年,常住人口8291268人 [124]  ,城镇化率70.5%。</a></p>" + 
	"</div>";
			var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象    
			map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
		</script>  
	</body>  
</html>

在这里插入图片描述 任意点到公司的路线

<!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>  
		<style type="text/css">  
		html{height:100%}  
		body{height:100%;margin:0px;padding:0px}  
		#container{height:100%}  
		</style>  
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=1yGIc901IHvG65b3jGUu5nrkWUOYpT3c"></script>
	</head>  
 
	<body>  
		<div id="container"></div> 
		<script type="text/javascript"> 
			var map = new BMap.Map("container");
			// 创建地图实例  
			var point = new BMap.Point(119.306239,26.075302);
			// 创建点坐标  
			map.centerAndZoom(point, 16);
			// 初始化地图,设置中心点坐标和地图级别 
			map.enableScrollWheelZoom();
	
			// 给map添加事件
			map.addEventListener("click", function(e){    
				map.clearOverlays();
				// 添加标注
				var point2 = new BMap.Point(e.point.lng, e.point.lat);
				var marker = new BMap.Marker(point2);        // 创建标注    
				map.addOverlay(marker);                     // 将标注添加到地图中 
				// 生成路径
				var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
				driving.search(point2, point);
				
			}) 
			
			
			
		</script>  
	</body>  
</html>

任意点击生成路线 在这里插入图片描述