嘿，好问题！完全可以不用Google API甚至额外的第三方地理服务API来实现你要的功能——咱们可以靠浏览器原生的Geolocation API，搭配OpenStreetMap的免费地图瓦片来搞定，全程不需要申请API密钥或者调用付费服务。下面给你一步步拆解实现方法：

1. 用浏览器原生API获取用户位置 #

浏览器自带的Geolocation API是免费且无需额外配置的，它直接调用设备的定位功能（GPS、WiFi、基站等）。你只需要一段简单的JS代码就能拿到经纬度：

// 请求用户授权获取位置
navigator.geolocation.getCurrentPosition(
  // 定位成功的回调函数
  (position) => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(`你的位置：纬度 ${latitude}，经度 ${longitude}`);
    // 拿到位置后初始化地图并添加标记
    initMapAndMarker(latitude, longitude);
  },
  // 定位失败的回调函数
  (error) => {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        alert("你拒绝了定位授权，无法获取位置");
        break;
      case error.POSITION_UNAVAILABLE:
        alert("无法获取当前位置");
        break;
      case error.TIMEOUT:
        alert("定位请求超时");
        break;
    }
  },
  // 可选配置：提高精度、超时时间等
  { enableHighAccuracy: true, timeout: 10000 }
);

2. 搭建自定义OpenStreetMap地图（无需API密钥） #

你之前能显示完整的OpenStreetMap，现在可以用轻量开源的Leaflet纯前端库（不需要后端API密钥）来快速搭建地图，它能直接加载OpenStreetMap的免费瓦片。步骤很简单：

首先在HTML里引入Leaflet的CSS和JS（直接用CDN，不需要本地下载）：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

然后创建一个地图容器：

<div id="map" style="width: 100%; height: 500px;"></div>

3. 在地图上添加位置标记 #

接下来写一个初始化地图并添加标记的函数，就是刚才定位成功后调用的initMapAndMarker：

function initMapAndMarker(lat, lng) {
  // 初始化地图，设置中心点为用户位置，缩放级别设为15（适合查看周边）
  const map = L.map('map').setView([lat, lng], 15);

  // 加载OpenStreetMap的瓦片图层（免费公开，无需API）
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors' // 记得保留版权声明哦
  }).addTo(map);

  // 在用户位置添加标记
  L.marker([lat, lng])
    .addTo(map)
    .bindPopup('这是你的位置！') // 点击标记弹出提示
    .openPopup();
}

几个关键注意事项 #

• HTTPS要求：除了本地开发的localhost，浏览器在HTTP环境下会禁用Geolocation API，所以部署的时候要确保网站是HTTPS协议。
• 用户授权：浏览器会弹窗询问用户是否允许定位，必须得到用户同意才能获取位置。
• 精度问题：enableHighAccuracy设为true会提高精度，但可能消耗更多电量且定位速度变慢，你可以根据需求调整。

这样一套下来，你就能在自己的自定义地图上显示用户位置并添加标记，全程不需要Google API或者其他付费/需要密钥的服务啦！

内容的提问来源于stack exchange，提问作者Mak Gora