首先使用百度地图需要在百度地图平台申请一个密钥，网址：
申请之后就可以直接引用了。
效果图：
代码实现（详细注释）:
<!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="?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 = "?origin=" + latCurrent + "," + lngCurrent + "&destination=30.4325,111.182311&mode=driving®ion=随便写的一个地址&output=html"; } else { alert('failed'+this.getStatus()); } }); </script> </body> </html>
