简介HTML5地理定位是现代移动网页开发的重要能力这份《响应式网页开发实战》第5章教学教案PDF专门面向前端初学者、高校教师及培训讲师系统讲解Geolocation API获取用户当前位置以及结合百度地图JavaScript API实现位置信息可视化展示的完整流程。资源共1个PDF文件大小仅239KB内容紧凑便于下载后直接在课堂投影或自学场景中使用。教案采用任务驱动、分组讨论与理论实践一体化设计安排了“使用Geolocation获取用户当前位置”和“调用百度地图显示用户位置”两大教学任务覆盖教学目标、重难点、课时建议、任务描述、知识讲解与实施步骤并包含getCurrentPosition方法成功/错误回调、位置数据来源、百度地图Point/Marker对象应用、坐标加密说明等核心知识点。读者既可跟随任务逐步实现获取经纬度并显示在地图上也可借助其中的教学导航快速备课、组织学生实操目前已有90人学习下载适合作为Web前端HTML5章节的补充教学资料或自学参考。1. HTML5地理定位一个按钮拿到用户经纬度没那么玄HTML5地理定位是响应式网页开发里存在感极强的一块它让前端页面绕过后端请求直接拿到用户设备的经纬度。一个“点我”按钮触发navigator.geolocation.getCurrentPosition()位置信息就回来了。但真正落地时你大概率会碰到几个问题浏览器不弹授权框、坐标扔到地图上偏了几百米、用户拒绝后页面直接白屏。《响应式网页开发》第5章这份教案PDF把Geolocation API和百度地图JavaScript API整个串了起来两个任务从取坐标到画地图四到八课时能讲完也适合自学动手跟敲。适合正在学HTML5的新手也适合要用定位功能但不想在地图厂商文档里翻半天的一线前端。2. getCurrentPosition三个参数成功、失败与定位选项的取舍2.1 位置数据从哪来GPS、Wi-Fi与基站的取舍教案里把“位置信息数据来源”单列成一个知识点这其实是在提醒网页拿到的经纬度不是凭空产生的。设备定位主要靠三条链路——GPS模块直接收卫星信号精度最高能到十米以内但室内基本失效Wi-Fi定位是通过扫描周边热点的MAC和信号强度去反查位置数据库室内和城市里很常用移动网络基站定位是靠手机连上的基站三角计算精度最差可能漂出几百米。浏览器里的position.coords不会告诉你这次用的是哪条链路但accuracy属性会给出精度半径这个值能帮你判断数据是否可信在后面的避坑章节会展开讲。定位结果之所以看起来“瞬间返回”是因为浏览器内部把这几种来源做了融合调度打开耗电且慢的GPS同时用Wi-Fi和基站兜底哪个先拿到能用就回调哪个。这也是为什么你在不同环境下打开同一个定位页面经纬度有时稳、有时飘。2.2 支持性检测与getCurrentPosition调用教案5.1.1的任务描述把“判断浏览器对Geolocation API的支持性”放在第一步这一步确实不能省。虽然现代浏览器基本都实现了但偶尔有用户拿老内核的WebView开页面不判断的话后续调用直接报错页面表现像“失灵了”。if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, errorPosition); } else { document.getElementById(location).innerHTML 您的浏览器不支持地理定位; }这段代码的逻辑很直白navigator.geolocation存在才调用getCurrentPosition不存在就给用户一个明确提示而不是让页面静默失败。注意getCurrentPosition在这里只传了两个参数第三个参数没传——那在2.3小节补上。实际项目里我习惯用函数包一层方便在按钮事件里复用。function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, errorPosition, { enableHighAccuracy: true, timeout: 8000, maximumAge: 3000 }); } else { document.getElementById(location).innerHTML 您的浏览器不支持地理定位; } }在getLocation()里调用getCurrentPosition包裹第三个参数这是教案5.1.3描述的实现方式。enableHighAccuracy: true表示容许设备开GPS这类高精度硬件代价是耗电和定位时间变长timeout是等待回包的最长毫秒数超过就触法错误回调maximumAge表示允许用多少秒内的缓存坐标0代表必须重新定位Infinity代表闭眼用旧值。这三个参数是定位体验调优的主战场不是随便填填的。2.3 三个参数逐个拆解成功回调、失败回调与定位选项getCurrentPosition的三个参数各司其职。第一个参数showPosition是成功回调接收一个Position对象第二个参数errorPosition是失败回调接收一个PositionError对象第三个参数就是我们刚才那几个选项。教案特别强调“三个参数”因为很多教程只提成功回调导致定位失败时页面毫无反馈用户以为功能坏了。function showPosition(position) { const latitude position.coords.latitude; const longitude position.coords.longitude; const accuracy position.coords.accuracy; document.getElementById(location).innerHTML 经度 longitude br纬度 latitude br精度 accuracy 米; } function errorPosition(error) { switch (error.code) { case 1: alert(用户拒绝了位置权限); break; case 2: alert(无法获取位置信息); break; case 3: alert(定位超时请检查网络或开阔环境); break; } }成功回调从position.coords里取值latitude、longitude是核心accuracy是精度半径。错误回调按error.code区分三种失败场景1是用户拒绝、2是位置不可用、3是超时。应用里至少要对这三种情况给出不同的用户提示而不是笼统一句“定位失败”。timestamp属性在需要记录定位时刻的场景也有用但平时取坐标用不上。在这个任务里教案的定位目标是“能显示出经纬度并捕获错误”所以上面这段已经完成任务。真正的地图展示任务在下一章。3. 坐标到地图百度地图JavaScript API接入与三个核心类3.1 引入百度地图JavaScript APIak申请与script标签教案5.2用的是百度地图JavaScript API老版本通过一个script标签直接引入新手最容易卡在这一步——不知道ak从哪来、为什么引用报错。script typetext/javascript srchttps://api.map.baidu.com/api?v3.0akYOUR_AK /scriptak需要去百度地图开放平台lbsyun.baidu.com注册账号创建一个“浏览器端”类型的应用才能拿到访问密钥。创建时填的“启用服务”建议全勾“参考域名”这里有个坑如果你是本地调试要填localhost或127.0.0.1否则线上能用、本地就被防盗链拦了。引入时机上我一般在页面head里加这个script但百度地图API的加载是异步回调式的script负载完不一定马上有BMap对象。常见做法是在window上挂一个init回调src里加callbackinitMap地图初始化代码放进initMap函数里。教案里没讲这个细节但实际写代码时比教程例子多绕一步新手常在这一卡半小时。3.2 三步建图Map、Point、Marker教案5.2.3把百度地图集成拆成三步创建地图实例、创建Point传坐标、创建Marker标位置。这三步对应的代码非常经典。var map new BMap.Map(mapContainer); var point new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker new BMap.Marker(point); map.addOverlay(marker);第一行new BMap.Map(mapContainer)里的参数是容器div的id这个div必须有明确高度常见的翻车是height: 0导致地图空白。第二行BMap.Point的构造函数是(经度, 纬度)不是先纬度后经度这和某些其他地图API不一样写错了坐标就飞到海里去了。第三行centerAndZoom(point, 15)里的15是缩放级别数字越大越放大城市级定位用15到18都合适。最后两行是创建标记物并加到地图上不addOverlay标记就不显示。教案里提到“为了更明显的显示出当前位置定义了一个图片标记”这句对应BMap.Marker的图标参数var myIcon new BMap.Icon(定位图标.png, new BMap.Size(32, 32), { anchor: new BMap.Size(16, 32) }); var marker new BMap.Marker(point, { icon: myIcon }); map.addOverlay(marker);BMap.Icon第一个参数是图片URL第二是图标显示尺寸anchor表示图片的哪个点钉在坐标上。不配anchor的话默认图片左上角对准坐标会感觉图标“偏了”。3.3 坐标加密为什么你传进去的经纬度会偏移教案5.2.3末尾有句话值得反复看“经度、纬度的值都会加密所以显示的位置可能与实际位置有偏差不是错误。”这句话翻译一下就是坐标系的坑。GPS设备直接拿到的是WGS-84标准但在国内合法提供地图服务必须用国测局加密后的坐标通常叫GCJ-02百度地图又在这层基础上做了自己的二次偏移叫BD-09。你拿着navigator.geolocation返回的WGS-84坐标直接扔给BMap.Point在地图上会偏一个方向几百米。这不是代码错了是坐标系没转。百度地图JavaScript API自带坐标转换能力常见做法是用BMap.Convertor把原始坐标转成百度坐标再画点function showPosition(position) { var convertor new BMap.Convertor(); var pointArr [new BMap.Point(position.coords.longitude, position.coords.latitude)]; convertor.transMore(pointArr, 1, function(result) { if (result.status 0) { var bPoint result.points[0]; map.centerAndZoom(bPoint, 15); var marker new BMap.Marker(bPoint); map.addOverlay(marker); } }); }transMore第二个参数1表示“GPS原始坐标转百度坐标”其中result.status 0是转换成功的标志result.points是转换后的坐标集合。转完才能拿去做centerAndZoom和Marker。虽然百度地图接口在部分场景会自动纠偏但显式转换一遍坐标偏移问题才能彻底堵住这也是高校教案很少细讲但工作里必踩的一环。4. 直接能跑的Demo把Task5-1和Task5-3合并成一份页面4.1 Task5-1获取经纬度并显示在页面上教案配套的Task5-1.html只负责“获取并显示经纬度”逻辑核心就一个按钮加两个回调。下面给一版能在浏览器里直接跑的完整HTML结构。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTML5地理定位演示/title style #map { width: 100%; height: 400px; } #location { margin: 10px 0; padding: 10px; background: #f5f5f5; } /style /head body button onclickgetLocation()点我/button div idlocation未获取位置/div script function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, errorPosition); } else { document.getElementById(location).innerHTML 浏览器不支持地理定位; } } function showPosition(position) { document.getElementById(location).innerHTML 经度 position.coords.longitude br纬度 position.coords.latitude br精度 position.coords.accuracy 米; } function errorPosition(error) { var tips ; switch (error.code) { case 1: tips 用户拒绝授权; break; case 2: tips 位置信息不可用; break; case 3: tips 定位超时; break; } document.getElementById(location).innerHTML tips; } /script /body /html这段代码就是教案5.1的完整落地盘。按钮触发getLocation支持性判断后调getCurrentPosition成功回调把经纬度显示到div里失败回调按错误码给提示。跑起来你会看到浏览器弹权限框点允许后div里出现坐标点拒绝则显示“用户拒绝授权”——教案图5.1的两个截图分别演示的就是这两种状态。4.2 Task5-3把坐标标上百度地图在4.1基础上把地图脚本引进来showPosition里不再只写文字而是顺手初始化地图。script typetext/javascript srchttps://api.map.baidu.com/api?v3.0akYOUR_AK /script div idmap/div script function showPosition(position) { var longitude position.coords.longitude; var latitude position.coords.latitude; document.getElementById(location).innerHTML 经度 longitude br纬度 latitude; var map new BMap.Map(map); var point new BMap.Point(longitude, latitude); map.centerAndZoom(point, 15); var marker new BMap.Marker(point); map.addOverlay(marker); } /script注意div idmap的CSS必须有高度比如4.1里那段样例的400px否则BMap.Map(map)拿到一个0高的容器地图渲染成一张白板。new BMap.Point接收的是GPS原始坐标这个先用着等第5章再讲怎么纠偏。4.3 合并两个任务一个按钮串起定位和地图教案把获取坐标和显示地图分成两个任务分开讲实际项目里它们通常是一个流程。合并思路是把4.2的showPosition与4.1的按钮结构叠在一起同时保留错误回调。合并后页面只需要一次授权、一次定位就能既显示文本坐标又展示地图。模板里的YOUR_AK换成你自己的密钥本地用localhost打开就能复现教案图5.4的效果。5. 地理定位常见问题排查坐标偏移、权限拦截与兼容性翻车5.1 现象坐标标上地图后偏了几百米现象页面拿到经纬度用BMap.Point放到百度地图上marker落在了一条街之外方向稳定地偏向某个方位每次偏的都差不多。原因navigator.geolocation返回的是WGS-84坐标百度地图用的是BD-09中间隔着一个GCJ-02加密层直接丢进去必偏。解决使用BMap.Convertor的transMore方法第二个参数填1把GPS坐标转成百度坐标再显示。转换成功后再centerAndZoom和addOverlay。如果是其他地图服务比如高德需换成高德的“坐标转换API”方法类似但参数不同。5.2 现象浏览器根本不弹定位授权框现象部署到服务器上打开页面navigator.geolocation.getCurrentPosition调了半天既不弹出授权框也不进成功回调控制台报安全错误。原因现代浏览器把Geolocation API限定在安全上下文里也就是必须通过https://访问或者本地调试时用http://localhost、http://127.0.0.1。你用file://直接双击打开HTML或者用局域网的纯HTTP地址都会被浏览器直接拒绝。解决本地调试起一个服务常见做法是python -m http.server 8000然后访问http://localhost:8000线上环境必须上HTTPS。手机端调试同理真机访问电脑上起的HTTP服务一样拿不到权限要么配HTTPS证书要么用内网穿透。5.3 现象用户拒绝授权后页面白屏或按钮无反应现象用户点了浏览器权限弹窗里的“阻止”页面没有任何报错点击按钮后定位区域一片空白或者干脆卡死。原因只写了成功回调showPosition第二个参数errorPosition没写或者写了但里面是空的。错误被浏览器吞掉页面就“装死”。解决把所有getCurrentPosition调用都补齐第二参数在errorPosition里至少按error.code区分用户拒绝、位置不可用、超时三种情况给用户明确提示。加一个兜底文案“无法获取位置请检查权限设置”也比白屏强。这也是教案5.1任务知识里强调getCurrentPosition三个参数的原因。5.4 现象定位特别慢或者定位结果跳来跳去现象同样一个页面有时几秒就出结果有时十几秒转圈同一位置连续刷新坐标每次都不一样漂移几十米。原因定位链路选择问题。开了enableHighAccuracy: true时设备优先试GPS室内GPS信号差就会长时间等卫星失去响应而没开高精度时走的Wi-Fi定位快但精度低坐标自然会小幅漂移。解决按场景取舍。城市室内应用enableHighAccuracy: false加配合timeout: 5000速度快体验稳步行导航或户外打卡场景才开true并且把timeout放宽到8000以上给GPS留出接收卫星的时间。对精度要求一般的场景先拿maximumAge: 3000的缓存坐标渲染页面再用高精度后台刷新是更平衡的写法。5.5 现象老教案里的IE专属问题现象照着教案5.2原文“使用IE浏览器访问页面就能成功调用百度2D地图”现代浏览器打开却黑屏或报错。原因教案成稿时IE还是主力百度地图JavaScript API v2.0对IE做了兼容。现在IE已经退场百度地图开放平台新老接口也迭代了几轮老的2D接口在部分现代浏览器下已经不稳定更不要提Edge的IE模式。解决直接用新版接口比如百度地图GL版初始化方式变化不大但参数和样式都更新了。教案里“IE支持好”这个判断已经失效现在开发就以Chrome/Edge为基准不要为了老接口回退。6. watchPosition持续追踪与定位精度验证从“能定位”到“定位准”getCurrentPosition是一锤子买卖适合“点我拿坐标”的交互。但步行导航、骑行轨迹这类场景需要持续拿位置就用watchPosition。它会在设备位置变化时不停触发成功回调第一次触发后会立即回调当前坐标之后按定位引擎的刷新频率更新恰恰对应教案5.1.2里提到的Geolocation对象“持续监控位置变化”的能力。var watchId navigator.geolocation.watchPosition(showPosition, errorPosition, { enableHighAccuracy: true, maximumAge: 1000, timeout: 10000 }); // 停止监听 navigator.geolocation.clearWatch(watchId);watchPosition的方法签名和getCurrentPosition完全一样只是返回一个watchId在页面卸载或用户切换页面时用clearWatch清掉不然回调会一直跑手机电量会被盯上。maximumAge在这个场景很关键设1000意思是可以接受1秒内的位置缓存避免每次回调都重新GPS上星功耗和流畅度都好一点。拿了持续坐标剩下的问题是怎么判断这套定位到底准不准我习惯用两次坐标距离来验证。function distanceMeters(lat1, lng1, lat2, lng2) { var R 6371000; function toRad(d) { return d * Math.PI / 180; } var dLat toRad(lat2 - lat1); var dLng toRad(lng2 - lng1); var a Math.sin(dLat / 2) * Math.sin(dLat / 2) Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) * Math.sin(dLng / 2); return 2 * R * Math.asin(Math.sqrt(a)); }把两次watchPosition回调的坐标塞进去算出位移距离再对照你实际走的步数就能大致判断这套定位是准还是飘。我曾经调一个移动端网页定位界面看着一直不刷新排查了半天才发现是timeout: 3000在户外扫码场景下GPS还没出结果就误判超时。从那以后我每次写定位功能都强制走一遍完整检查先确认协议是HTTPS或localhost再把成功回调、错误回调、options三个参数补齐最后用坐标转换或距离公式验证误差一套下来翻车概率低了很多。希望帮到你。本文还有配套的精品资源点击获取