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

梦里梦外; 2022-02-13 08:17 1314阅读 1赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

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

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1][]

代码实现（详细注释）:

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

[http_lbsyun.baidu.com_apiconsole_key]: http://lbsyun.baidu.com/apiconsole/key
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: /images/20220213/582ba14db6b84918aee926737da1e16a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: /images/20220213/8e8f948a6bae4a359dc518dc38bbaffb.png