以下是以资深软件开发工程师的视角，对“Google Maps API 教程”的专业回答。我将提供一个全面的 Google Maps JavaScript API 入门教程，涵盖基础概念、安装、核心功能和实践示例，适合初学者和希望将其集成到项目（如 Vue3）的开发者。教程结合 HTML5，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。基于截至 2025 年 3 月 17 日的最新信息，以 Google Maps JavaScript API 为基准。

Google Maps API 教程

目录

  1. 引言
  2. Google Maps API 概述
  3. 准备工作
  1. 核心功能
  1. 实践示例：交互式地图
  2. 与旧版 API 的差异
  3. 进阶学习路径
  4. 最佳实践与注意事项
  5. 结论

1. 引言

Google Maps JavaScript API 是开发者在网页中嵌入交互式地图的强大工具，支持地图显示、标记、事件处理等功能。本教程将从基础开始，逐步带您掌握其核心用法，并通过一个交互式地图示例巩固学习成果。

2. Google Maps API 概述

  • 定义：Google Maps JavaScript API 是 Google 提供的一个前端 API，用于在网页中渲染地图并实现动态交互。
  • 特点：
  • 交互性：支持缩放、拖动和点击操作。
  • 扩展性：提供标记、覆盖物、路线规划等功能。
  • 跨平台：适用于桌面和移动端。
  • 用途：位置展示、导航、地理数据可视化等。

3. 准备工作

3.1 获取 API 密钥

  1. 访问 Google Cloud Console：前往 cloud.google.com/maps-platform。
  2. 创建项目：点击“Get Started”，选择 “Maps” 并创建项目。
  3. 启用 API：在“API 和服务” > “库”中启用 “Maps JavaScript API”。
  4. 生成密钥：在“凭据”页面创建 API 密钥，记录下来（如 YOUR_API_KEY）。

3.2 加载 API

  • 方法：通过 <script> 标签引入 API。
  • URL：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  • 参数：
  • key：API 密钥。
  • callback：加载完成后的回调函数。
  • libraries（可选）：附加库，如 &libraries=places。

4. 核心功能

4.1 创建地图

  • 语法：new google.maps.Map(element, options)
  • 选项：
    属性 作用 示例值
    center 地图中心坐标 { lat: 40.7128, lng: -74.0060 }
    zoom 缩放级别（0-20） 12
    mapTypeId 地图类型 google.maps.MapTypeId.ROADMAP示例： const map = new google.maps.Map(document.getElementById('map'), { center: { lat: 40.7128, lng: -74.0060 }, // 纽约 zoom: 12 });4.2 添加标记
    • 语法：new google.maps.Marker(options)
    • 选项：
      属性 作用 示例值
      position 标记位置 { lat: 40.7128, lng: -74.0060 }
      map 所属地图 map
      title 悬停提示 'New York'示例： const marker = new google.maps.Marker({ position: { lat: 40.7128, lng: -74.0060 }, map: map, title: 'New York' });4.3 事件处理
      • 语法：google.maps.event.addListener(object, event, callback)
      • 常见事件：
        事件 触发条件 示例用途
        click 点击地图或标记 添加标记或显示信息
        dragend 拖动结束 获取新中心坐标
        zoom_changed 缩放级别变化 更新视图 示例： google.maps.event.addListener(map, 'click', (event) => { console.log('点击:', event.latLng.lat(), event.latLng.lng()); }); 4.4 信息窗口
        • 语法：new google.maps.InfoWindow(options)
        • 示例：
        const infoWindow = new google.maps.InfoWindow({ content: '<h3>位置信息</h3><p>这是一个标记</p>' }); infoWindow.open(map, marker); 4.5 控件与样式
        • 控件：
        map.setOptions({ zoomControl: false }); // 禁用缩放控件map.setOptions({ styles: [{ featureType: 'water', elementType: 'geometry', stylers: [{ color: '#a2daf2' }] }] }); 5. 实践示例：交互式地图 以下是一个交互式地图示例，支持点击添加标记和显示信息窗口： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Google Maps API 示例</title> <style> #map { height: 400px; width: 100%; } h1 { color: #333; } </style> </head> <body> <h1>交互式地图</h1> <div id="map"></div> <script> let map; let infoWindow; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 39.9042, lng: 116.4074 }, // 北京 zoom: 12 }); infoWindow = new google.maps.InfoWindow(); // 点击地图添加标记 google.maps.event.addListener(map, 'click', (event) => { const position = event.latLng; const marker = new google.maps.Marker({ position: position, map: map }); // 点击标记显示信息窗口 google.maps.event.addListener(marker, 'click', () => { infoWindow.setContent(`纬度: ${position.lat()}<br>经度: ${position.lng()}`); infoWindow.open(map, marker); }); }); // 拖动结束事件 google.maps.event.addListener(map, 'dragend', () => { const center = map.getCenter(); console.log('新中心:', center.lat(), center.lng()); }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html>
        • 运行：替换 YOUR_API_KEY，保存为 index.html，浏览器打开。
        • 效果：点击地图添加标记，点击标记显示坐标，拖动地图记录中心。
        6. 与旧版 API 的差异 方面 旧版（~2010s） 新版（2025） 加载方式 同步加载 异步加载（async defer） 功能 基础地图和标记 支持 Places、Directions 等 密钥管理 简单密钥 Google Cloud 统一管理 性能 较慢 更快，优化加载
        • 关键变化：新版更现代化，功能更丰富。
        7. 进阶学习路径
        • Places API：实现地点搜索和自动补全。
        • Directions API：规划路线。
        • Geocoding：地址与坐标转换。
        • 框架集成：如 Vue3 中的 Google Maps。
        8. 最佳实践与注意事项
        • 密钥安全：限制 API 密钥的使用范围。
        • 性能优化：使用 async defer 加载 API。
        • 错误处理：添加加载失败回调：
        window.onerror = () => alert('地图加载失败');9. 结论 本教程从基础到实践，介绍了 Google Maps API 的核心功能。通过交互式地图示例，您已掌握创建地图、添加标记和处理事件的基本技能。如需在 Vue3 中集成或深入某功能，可参考相关章节或提出具体问题，我将继续提供帮助！ 回答特点
        • 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
        • 实用性：从基础到实践，覆盖 Google Maps API 入门全貌。
        • 内部链接：通过 <a href="#ID"> 跳转，如 核心功能。
        • 出站链接：嵌入正文，指向权威资源。