TypeScript 中的地理定位与地图：库、API 和代码示例

TypeScript 中的地理定位与地图：库与工具完整指南

现代 Web 应用程序越来越需要与地理数据集成：从确定用户位置到显示交互式地图。TypeScript 凭借其严格的类型化以及对现代标准的支持，成为开发此类解决方案的理想选择。在本文中，我们将详细探讨用于在 TypeScript 中处理地理定位和地图的库与工具，提供实用的代码示例，并给出选择建议。

1. 获取地理定位：Navigator Geolocation API

浏览器内置的 navigator.geolocation API 是获取用户坐标的基础。TypeScript 为此 API 提供了类型，使工作更安全、更方便。

// 用于获取当前位置的类型化函数function getCurrentPosition(): Promise<GeolocationPosition> {    return new Promise((resolve, reject) => {        if (!navigator.geolocation) {            reject(new Error('浏览器不支持地理定位'));            return;        }                navigator.geolocation.getCurrentPosition(            (position: GeolocationPosition) => {                resolve(position);            },            (error: GeolocationPositionError) => {                reject(error);            },            {                enableHighAccuracy: true,                timeout: 5000,                maximumAge: 0            }        );    });}

// 使用示例async function showUserLocation(): Promise<void> {    try {        const position = await getCurrentPosition();        const { latitude, longitude } = position.coords;        console.log(`纬度: ${latitude}, 经度: ${longitude}`);    } catch (error) {        console.error('获取地理定位时出错:', error);    }}

2. 显示地图：流行库对比

在 TypeScript 中处理地图，有多个强大的库可供选择。我们来考察三个最流行的选项。

2.1 使用 TypeScript 的 Leaflet

Leaflet 是一个轻量级的开源交互式地图库。它拥有官方类型 (@types/leaflet)，确保了对 TypeScript 的全面支持。

import L from 'leaflet';import 'leaflet/dist/leaflet.css';

// 创建带类型化的地图const map: L.Map = L.map('map', {    center: [55.751244, 37.618423], // 莫斯科    zoom: 10,    zoomControl: true});

// 添加 OpenStreetMap 瓦片L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {    attribution: '© OpenStreetMap contributors'}).addTo(map);

// 带类型化选项的标记const marker: L.Marker = L.marker([55.751244, 37.618423], {    draggable: true,    title: '莫斯科'}).addTo(map);

// 带类型化的事件处理marker.on('dragend', (event: L.LeafletMouseEvent) => {    const coords: L.LatLng = event.target.getLatLng();    console.log(`新坐标: ${coords.lat}, ${coords.lng}`);});

2.2 Mapbox GL JS

Mapbox 提供高性能的矢量地图，具有丰富的样式定制能力。TypeScript SDK 可通过 mapbox-gl 获得。

import mapboxgl from 'mapbox-gl';import 'mapbox-gl/dist/mapbox-gl.css';

// 设置访问令牌mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

// 创建带类型化参数的地图const map: mapboxgl.Map = new mapboxgl.Map({    container: 'map',    style: 'mapbox://styles/mapbox/dark-v11',    center: [37.618423, 55.751244],    zoom: 12,    pitch: 45 // 地图倾斜角度});

// 添加带自定义 HTML 的标记const marker: mapboxgl.Marker = new mapboxgl.Marker({    color: '#FF0000',    draggable: true,    rotation: 45})    .setLngLat([37.618423, 5