HTML实现百度地图定位及导航功能

最新推荐文章于 2024-04-10 12:44:19 发布

小马同学

最新推荐文章于 2024-04-10 12:44:19 发布

阅读量2.2w

点赞数 10

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40205116/article/details/89600595

版权

前端专栏收录该内容

27 篇文章 8 订阅

订阅专栏

首先使用百度地图需要在百度地图平台申请一个密钥，网址：http://lbsyun.baidu.com/apiconsole/key

申请之后就可以直接引用了。

效果图：

代码实现（详细注释）:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--适应移动端页面展示-->
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title></title>
		<!--引用百度地图API文件-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
		<style type="text/css">
		    html {
		    	height: 100%
		    }
		    
		    body {
		    	height: 100%;
		    	margin: 0px;
		    	padding: 0px
		    }
		    /*设置容器样式*/
		    #container {
		    	height: 100%;
		    }
		</style>
	</head>
	<body>
		<!--地图存放的div-->
		<div id="container"></div>
		
		<script type="text/javascript">
			//创建地址实例
			var map = new BMap.Map("container"); 
			//设置中心的坐标
			var point = new BMap.Point();
			//初始化地图页面，设置中心点坐标和地图级别  
			map.centerAndZoom(point, 15); 
			//开启鼠标滚轮缩放地图
			map.enableScrollWheelZoom(true);
			
			//添加控件
			//缩略地图OverviewMapControl，默认位于地图右下方，是一个可折叠的缩略地图
			map.addControl(new BMap.OverviewMapControl());
			//地图类型MapTypeControl, 默认位于地图右上方
			map.addControl(new BMap.MapTypeControl());
			//平移缩放控件 NavigationControl	, PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方
			map.addControl(new BMap.NavigationControl());
			//比例尺ScaleControl, 默认位于地图左下方，显示地图的比例关系
			//map.addControl(new BMap.ScaleControl());
			//设置控件位置偏移，x,y轴
			var opts = {offset: new BMap.Size(90, 30)}
			map.addControl(new BMap.ScaleControl(opts));
			
			//根据浏览器定位，之后显示当前位置
			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r){
				if(this.getStatus() == BMAP_STATUS_SUCCESS){
					var mk = new BMap.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
					var latCurrent = r.point.lat;
					var lngCurrent = r.point.lng;
					alert('您的位置：'+r.point.lng+','+r.point.lat);
					//设置导航终点，起始位置到终点位置
					location.href = "http://api.map.baidu.com/direction?origin=" + latCurrent + "," + lngCurrent + 
					"&destination=30.4325,111.182311&mode=driving&region=随便写的一个地址&output=html";
				}
				else {
					alert('failed'+this.getStatus());
				}        
			});
		</script>
	</body>
</html>

小马同学

关注

10
点赞
踩
108

收藏

觉得还不错? 一键收藏
19
评论
HTML实现百度地图定位及导航功能

首先使用百度地图需要在百度地图平台申请一个密钥，网址：http://lbsyun.baidu.com/apiconsole/key申请之后就可以直接引用了。效果图：代码实现（详细注释）:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <!--适应移...
复制链接

扫一扫

专栏目录