javascript如何实现地图_Google Maps和Mapbox如何集成_技术教程

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（免费账户可获）。

安装：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 直接换 style URL，甚至可本地 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(...) 声明式添加