JavaScript集成Google Maps与Mapbox的核心是加载SDK、初始化容器、设置坐标及交互；Google用@googlemaps/js-api-loader，坐标为{lat,lng}，需API Key；Mapbox用mapbox-gl-js，坐标为[lng,lat]，需Access Token，且国内Google不可用。
JavaScript 中集成 Google Maps 和 Mapbox，核心是加载对应 SDK、初始化地图容器、设置坐标与交互。两者 API 设计不同，但思路一致：引入脚本 → 获取容器元素 → 创建地图实例 → 添加标记/图层/事件。
Google Maps：用 @googlemaps/js-api-loader 最简接入
推荐使用官方封装的 @googlemaps/js-api-loader（比直接 script 标签更可控、支持 Promise）。
- 安装：
npm install @googlemaps/js-api-loader - 初始化时传入 API Key（需在 Google Cloud Console 开启 Maps JavaScript API 并配额）
- 确保 HTML 中有带 id 的容器，如
示例代码：
import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({
apiKey: "YOUR_GOOGLE_MAPS_API_KEY",
version: "weekly"
});
loader.load().then(() => {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 39.9042, lng: 116.4074 }, // 北京
zoom: 12,
mapId: "YOUR_MAP_ID" // 可选，用于自定义样式（需在 Cloud Console 创建）
});
new google.maps.Marker({
position: { lat: 39.9042, lng: 116.4074 },
map,
title: "北京"
});
});
Mapbox：用 mapbox-gl-js 加载矢量瓦片地图
Mapbox 使用 WebGL 渲染，性能好、样式灵活，需 Mapbox Access Token（免费账户可获）。
立即学习“Java免费学习笔记（深入）”；
- 安装：
npm install mapbox-gl - CSS 必须引入：
import 'mapbox-gl/dist/mapbox-gl.css'; - 容器同样需固定宽高，且不能被父级隐藏或 collapse
示例代码：
import mapboxgl from 'mapbox-gl';
// 设置 token（必须在创建地图前）
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12', // 或自定义样式 URL
center: [116.4074, 39.9042], // 注意：[lng, lat]，顺序和 Google 相反
zoom: 12
});
// 添加标记（使用 DOM 元素方式）
const marker = new mapboxgl.Marker()
.setLngLat([116.4074, 39.9042])
.setPopup(new mapboxgl.Popup().setHTML('北京'))
.addTo(map);
关键差异与避坑提醒
两者看似相似，但细节容易出错：
-
坐标顺序：Google 是
{lat, lng}；Mapbox 是[lng, lat]—— 写反会导致地图定位飞到非洲或南极 -
样式控制：Google 需通过
mapId+ Cloud Console 配置；Mapbox 直接换styleURL，甚至可本地 JSON 定义 - 离线/私有部署：Google 不支持离线；Mapbox 可搭配自建 Tile Server（如 Tegola）实现内网地图
- 中国境内限制：Google Maps 在国内无法访问（DNS/HTTPS 层拦截），实际项目慎用；Mapbox 全球可用，但底图在中国区域精度略低于高德/百度
进阶共用技巧：地理编码、路线规划、GeoJSON 渲染
两者都支持扩展功能，但实现路径不同：
-
地址转坐标（Geocoding）：Google 调
Geocoder类；Mapbox 调https://api.mapbox.com/geocoding/v5/...REST 接口（前端直调需注意 CORS 和 Token 暴露风险） -
路径规划：Google 用
DirectionsService；Mapbox 用@mapbox/mapbox-sdk调用 Directions API -
加载 GeoJSON：Google 用
data.loadGeoJson()；Mapbox 用map.addSource(...)+map.addLayer(...)声明式添加
基本上就这些。选哪个取决于合规要求、地图样式需求和团队熟悉度 —— Google 文档全、生态稳；Mapbox 更现代、定制强、开发体验顺。
