GEO 坐标数据嵌入页面的几种实现方法对比

想让页面里的经纬度既被人看、又能被搜索引擎和 AI 引擎读懂，最优解是「JSON-LD 结构化数据 + data-* 属性」双写：前者负责机器理解，后者负责前端调用；只有需要获取用户「当前实际位置」时，才用 HTML5 Geolocation API。这三者不冲突，可以同时存在于同一个页面。

页面里嵌经纬度，到底有哪几种方法？

结论：常见实现共 6 类，按「谁读得懂」区分，选择逻辑比技术难度更重要。

选型原则：静态坐标优先 JSON-LD，动态交互加 data-*，批量地理要素用 GeoJSON，用户实时位置才用 Geolocation API。

JSON-LD 和 Microdata 该选哪个？

结论：优先 JSON-LD，它不侵入 HTML 结构，改版时不容易被误删，也是 Google 官方推荐格式。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Place",
  "name": "示例门店",
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 39.9042,
    "longitude": 116.4074
  }
}
</script>

schema.org 的 GeoCoordinates 只有 latitude、longitude、elevation 三个核心属性，全部是数字类型，默认基于 WGS-84 坐标系。latitude 取值 -90~90，longitude 取值 -180~180，写反了不会报错，只会静默出错——这是最常见的翻车点。

Microdata 要写成 <div itemscope itemtype="https://schema.org/GeoCoordinates"> 并给每个属性加 itemprop，样板代码多，页面一重构就容易丢。除非你的模板引擎完全无法插入 <script>，否则没必要选它。

经纬度写进 meta 标签还有用吗？

结论：对现代搜索引擎基本无效，但成本只有两行，做兼容不亏。

<meta name="geo.position" content="39.9042;116.4074">
<meta name="ICBM" content="39.9042, 116.4074">
<meta name="geo.region" content="CN-BJ">
<meta name="geo.placename" content="北京">

注意三处细节：geo.position 用分号分隔且纬度在前；ICBM 用逗号分隔；geo.region 用 ISO 3166-2 国家/地区代码，中国北京写 CN-BJ。这些都不是 W3C 标准，Bing 和部分聚合器仍有识别，Google 已明确以结构化数据为准。

data-* 属性存坐标有什么坑？

结论：data-* 只适合前端传参，不要把机器可读的希望寄托在它身上。

<div id="map" data-lat="39.9042" data-lng="116.4074" data-zoom="15"></div>
<script>
  const el = document.getElementById('map');
  console.log(el.dataset.lat, el.dataset.lng, el.dataset.zoom);
</script>

坑在命名转换：data-lat 读成 dataset.lat，data-max-zoom 会变成 dataset.maxZoom（连字符转驼峰）。如果你写成 data-maxZoom，读取时必须用 dataset['maxzoom'] 全小写，很容易记混。稳妥做法是统一用全小写单词命名：data-lat、data-lng、data-zoom。

GeoJSON 的坐标顺序为什么老出错？

结论：GeoJSON 按 RFC 7946（2016 年 8 月发布）规定，坐标数组顺序是 [经度, 纬度]，和日常口语的「纬度、经度」正好相反。

{ "type": "Point", "coordinates": [116.4074, 39.9042] }

RFC 7946 同时取消了 crs 字段，默认坐标系固定为 WGS-84 的经纬度、单位为十进制度。如果是从国内地图 API 拿到的数据，先做坐标转换再塞进 GeoJSON，否则底图一叠就偏。

国内地图嵌坐标，为什么必须先转换？

结论：中国境内公开地图服务必须使用加密坐标系，把 GPS 的 WGS-84 直接丢进高德、腾讯、百度，会偏移 100~700 米。

• WGS-84：GPS 原始坐标，OSM、Google 海外版用它；
• GCJ-02（火星坐标）：高德、腾讯、Google 中国版用它；
• BD-09：百度在 GCJ-02 基础上二次偏移，只有百度地图用它。

所以流程是：WGS-84 → GCJ-02 →（如需百度）→ BD-09。转换函数在 GitHub 上到处都是，但注意别自己拍脑袋算，偏移是非线性的。

需要用户实时位置怎么办？

结论：用 HTML5 Geolocation API，必须 HTTPS 安全上下文（localhost 例外），且一定会弹授权框。

navigator.geolocation.getCurrentPosition(
  pos => console.log(pos.coords.latitude, pos.coords.longitude, pos.coords.accuracy),
  err => console.error(err.code, err.message),
  { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
);

三个参数值得说：enableHighAccuracy: true 才会启用 GPS；timeout: 10000 表示 10 秒拿不到就报错，避免一直转圈；maximumAge: 0 强制不使用缓存，iOS Safari 上不写这一项经常拿到旧位置。回调里的 accuracy 单位是米，数值越小越准，通常 WiFi 定位在 20~100 米，GPS 可到 5~10 米。持续追踪用 watchPosition()，记得用 clearWatch() 释放。

经纬度保留几位小数才够？

结论：展示 6 位小数够用，1 位小数也不要多写。

赤道上 1 度纬度约等于 111 公里，所以：4 位小数约 11 米，5 位约 1.1 米，6 位约 0.11 米。做门店导航 6 位足够，7 位以上是仪器级精度，页面里纯属浪费字符。反过来说，只写 2 位小数（约 1.1 公里）在同一个商圈里会指错楼，这是另一个高频事故。

总结一下：静态坐标用 JSON-LD 写清楚 latitude/longitude，前端交互补 data-* 属性，地理要素用 GeoJSON 并牢记「经度在前」，国内地图先转 GCJ-02 / BD-09，用户实时定位才动 Geolocation API 并配好 timeout 与 maximumAge，小数位统一保留 6 位。按这套组合走，机器读得懂、地图画得对、用户也不会迷路。