门店详情、活动地点，点「导航」就要能走到。手机浏览器里定位成功后，把起点、终点交给百度地图网页，由它选路、播路线。
入口是 index.html。样式在 css/nav.css，逻辑在 js/nav.js。脚本先引百度地图 API，再引 jQuery，最后才是 nav.js。jQuery 掉到后面，$ 会挂；API 掉到后面，BMap 是空的。
地图导航用到哪些文件
html 里按这个顺序引：
ak 换成开放平台里申请的浏览器端密钥，并把当前域名加到白名单。s=1 走 https。密钥不要写进教程示例的固定值里，每个项目自己填。
页面就一个按钮 #openNav。.l-btn 用 padding: 8px 16px 撑开，加上 cursor: pointer。
页面骨架
如何获取当前定位
定位必须等用户点了按钮再要。浏览器把定位当成敏感权限，脚本一加载就调，多半被拦。这坑我见过不止一次。
BMap.Geolocation 的 getCurrentPosition 成功时，r.point.lng 是经度，r.point.lat 是纬度。this.getStatus() === BMAP_STATUS_SUCCESS 才算拿到点。页面要 https（或本机 localhost），http 下很多浏览器直接失败。
事件挂在 body 上委托。定位没成功就不要跳转。提示怎么写放在最后一节。微信里还要在公众号或 JSSDK 里配过位置权限，否则有的机型一直拿不到点。
导航地址如何拼出来
百度提供网页导航接口 api.map.baidu.com/direction。起… 31.966072,118.810103，名称是南京江宁诚信街城际空间站，方便立刻看到跳转；业务里改成门店自己的纬经度和地址。
几个参数说白了：
1、origin：当前点，latlng:纬度,经度|name:我。注意纬在前、经在后，和日常「经度,纬度」说法是反的。
2、destination：终点纬经度，中间逗号。
3、mode：driving 驾车，walking 步行，transit 公交。
4、region：终点所在城市或详细地址，帮百度把点落到路上。
5、output=html：打开网页导航，不要改成 json。
6、src：公司名和产品名，接口要求带上。
名称、地址里有中文，必须 encodeURIComponent。不编码，第一个 & 或空格会把参数截断，终点对不上。
如何跳转到百度地图
拼好地址后赋给 window.location.href，当前页整页打开百度导航。用户从 H5 进地图页，能看路线、能再开百度地图 App（手机里装了的话）。
要留着自己的 H5，不要整页走掉，可以 window.open(url)。需要用户还停在自己站点里，就嵌 iframe，有的浏览器会拦百度域名，还是新开页稳。
这一步没有自己的地图画布。定位只为了填起点，路线绘制、路况都在百度那边。
如何对接到真实项目中
终点不要写死。列表或详情里带上 data-lat、data-lng、data-name，点哪条就导到哪。jQuery 这套建议用 Layui 做提示，具体按实际项目来定。定位失败、接口失败走 layer.msg，不要 alert。
ak 换成项目密钥。/api/store/detail 的路径和字段换成项目约定。下面这份覆盖 nav.js，页面结构仍用前面的 html。
按钮带上 data-lat、data-lng、data-name，或只带 data-id 走接口。坐标用百度坐标系；从国测局或 GPS 来的点要先转换，否则会偏一截路。步行改 navMode 为 walking 即可。
