企业官网建设流程全解析

简介：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 API：ak申请与script标签

教案5.2用的是百度地图JavaScript API，老版本通过一个<script>标签直接引入，新手最容易卡在这一步——不知道ak从哪来、为什么引用报错。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"> </script>

ak需要去百度地图开放平台（lbsyun.baidu.com）注册账号，创建一个“浏览器端”类型的应用，才能拿到访问密钥。创建时填的“启用服务”建议全勾，“参考域名”这里有个坑：如果你是本地调试，要填localhost或127.0.0.1，否则线上能用、本地就被防盗链拦了。

引入时机上，我一般在页面<head>里加这个script，但百度地图API的加载是异步回调式的，script负载完不一定马上有BMap对象。常见做法是在window上挂一个init回调：src里加&callback=initMap，地图初始化代码放进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 lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5地理定位演示</title> <style> #map { width: 100%; height: 400px; } #location { margin: 10px 0; padding: 10px; background: #f5f5f5; } </style> </head> <body> <button onclick="getLocation()">点我</button> <div id="location">未获取位置</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 type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"> </script> <div id="map"></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 id="map">的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三个参数补齐，最后用坐标转换或距离公式验证误差，一套下来翻车概率低了很多。希望帮到你。

本文还有配套的精品资源，点击获取