JavaScript地理定位与地图追踪教程

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`当前位置: ${latitude}, ${longitude}`);
      // 将坐标传给地图初始化或标记
    },
    (error) => {
      console.error("定位失败:", error.message);
    }
  );
} else {
  console.log("浏览器不支持地理定位");
}

// 引入高德地图 JSAPI
// <script src="https://webapi.amap.com/maps?v=2.0&key=你的KEY"></script>

function initMap(lat, lng) {
  const map = new AMap.Map("map-container", {
    center: [lng, lat],
    zoom: 15
  });

  new AMap.Marker({
    map: map,
    position: [lng, lat]
  });
}

let trackLine = [];
let watchId;

function startTracking() {
  watchId = navigator.geolocation.watchPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      const point = [longitude, latitude];

      trackLine.push(point);

      // 更新地图标记
      updateMarker(point);

      // 绘制轨迹线
      drawPolyline(trackLine);
    },
    (error) => console.error(error),
    { enableHighAccuracy: true, maximumAge: 10000 }
  );
}

function drawPolyline(path) {
  if (window.AMap && !polyline) {
    polyline = new AMap.Polyline({ strokeColor: "#f30", strokeWeight: 5 });
    polyline.setMap(map);
  }
  polyline.setPath(path);
}