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 的容器，如 <p id="map" style="width:100%;height:400px"></p>

示例代码：

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免费学习笔记（深入）”；

标签： css javascript java html js 前端 json go npm 编码 access ai dns