原文地址: https://medium.com/@usmanniazibzu13/click-to-coordinates-capturing-live-gps-location-in-oracle-apex-maps-90093aec47cc?source=rss-5649797605dc------2 # Click to Coordinates: 在 Oracle APEX 地图中捕获实时 GPS 位置  现代应用程序通常需要捕获**用户的实时位置**，适用于以下场景： - 员工考勤/签到系统 - 现场服务跟踪 - 配送监控 - 基于位置的分析 通过**Oracle APEX地图区域**和**浏览器Geolocation API**，您可以轻松捕获用户位置并在交互式地图上显示。 本教程将构建一个简单的**签到地图**，用于捕获用户GPS坐标并在地图上放置标记。（示例应用中的Page#49） ## 第一步 — 创建必要的页面项 首先创建以下**页面项**来存储捕获的位置信息： - `P49_LAT`存储纬度 - `P49_LNG`存储经度 - `P49_ACC`存储GPS精度 - `P49_DEVICE`存储设备/浏览器信息 - `P49_MAP_STATUS`显示状态消息（只读） 这些项将临时存储从浏览器**Geolocation API**捕获的值。 ## 第二步 — 创建地图区域 在页面上创建**地图区域**。 在地图区域内，创建名为Layer 1的**地图图层**。 使用以下SQL查询作为**图层源**： ```sql select 1 as id, to_number(:P49_LAT) as latitude, to_number(:P49_LNG) as longitude, 'You are here' as label from dual where :P49_LAT is not null and :P49_LNG is not null ``` ### 功能说明 该查询动态创建一个**单标记**，使用从浏览器捕获的坐标。 ## 第三步 — 为地图区域分配静态ID 将地图区域的**静态ID**设置为：MAP_CHECKIN ## 第四步 — 创建捕获位置的按钮 创建按钮：BTN_CAPTURE_LOC，标签设置为**捕获位置** 该按钮将触发**浏览器的GPS位置请求**。 ## 第五步 — 在按钮上创建动态操作 在`BTN_CAPTURE_LOC`上创建**动态操作**： 事件：点击，添加以下**真实操作**。 ### 真实操作1 — 执行JavaScript代码 此JavaScript代码使用**浏览器Geolocation API**捕获用户位置： ```javascript (function () { function setStatus(msg) { if (apex.item("P49_MAP_STATUS")) { apex.item("P49_MAP_STATUS").setValue(msg); } } if (!navigator.geolocation) { setStatus("Geolocation not supported."); apex.message.alert("Geolocation is not supported by this browser."); return; } setStatus("Requesting location permission..."); navigator.geolocation.getCurrentPosition( function (pos) { var lat = pos.coords.latitude; var lng = pos.coords.longitude; var acc = pos.coords.accuracy; apex.item("P49_LAT").setValue(lat); apex.item("P49_LNG").setValue(lng); apex.item("P49_ACC").setValue(acc); apex.item("P49_DEVICE").setValue((navigator.userAgent || "") + " | " + (navigator.platform || "")); setStatus("Location acquired ✅ Accuracy: " + Math.round(acc) + "m"); apex.region("MAP_CHECKIN").reset(); // 下一个DA操作将： // 1) 提交页面项（存储到会话状态） // 2) 刷新地图区域（显示标记） // 3) 缩放（可选） }, function (err) { var msg = "Location error (" + err.code + "): " + err.message; setStatus(msg); apex.message.alert(msg); console.warn(msg); }, { enableHighAccuracy: true, timeout: 12000, maximumAge: 0 } ); })(); ``` ### 脚本功能 - 请求浏览器的**GPS权限** - 捕获：纬度、经度、精度、设备信息 - 将值存储到APEX页面项 - 准备刷新地图  ### 真实操作2 — 执行服务器端代码 提交以下项目到**会话状态**： P49_LAT P49_LNG P49_ACC P49_DEVICE 确保值可用于**地图图层SQL查询**。 ### 真实操作3 — 刷新地图区域 刷新地图区域。这会触发地图**重新渲染标记**基于捕获的坐标。 ## 第六步 — 自动缩放到捕获位置 刷新地图后，在地图区域上添加另一个**动态操作**： 事件：刷新后 操作：执行JavaScript代码 ```javascript (function(){ var lat = Number($v("P49_LAT")); var lng = Number($v("P49_LNG")); if (!lat || !lng) return; var r = apex.region("MAP_CHECKIN"); try { var mapObj = r.call("getMapObject"); if (mapObj && typeof mapObj.setView === "function") { mapObj.invalidateSize && mapObj.invalidateSize(); mapObj.setView([lat, lng], 17); } } catch(e) {} })(); ``` ### 脚本功能 - 自动**缩放到捕获位置** - 将地图中心对准标记 - 将缩放级别设置为**17** 这创建了**流畅的用户体验**，地图聚焦于用户确切位置。 ## 重要提示 — HTTPS要求 使用**浏览器Geolocation API**的一个重要要求是它仅在**安全连接(HTTPS)**上工作。 现代浏览器出于安全和隐私考虑，在应用程序运行于**不安全的HTTP连接**时会阻止访问位置服务。 ## 最终效果 应用程序现在将： - 请求位置权限 - 捕获GPS坐标 - 在地图上显示标记 - 自动缩放到位置 这种方法可以轻松扩展到： - **员工考勤签到** - **配送跟踪** - **基于位置的报告** - **现场服务管理** ## 结论 Oracle APEX地图区域与**浏览器Geolocation API**结合，提供了一种强大的方式来构建**位置感知应用程序**而无需外部库。 仅需几个页面项、JavaScript和简单的SQL查询，您就可以将**实时用户位置跟踪**直接集成到APEX应用程序中。 ## 使用环境与工具 - **Oracle APEX:** 24.2.14 - **Oracle数据库:** 26ai - **技术:** SQL, PL/SQL, JavaScript, Oracle APEX