由于您的问题是“Google Maps 基础”，而之前的上下文主要围绕 Vue3，我将假设您希望了解 Google Maps 的基础知识，并以通用的方式讲解，以便后续可结合 Vue3 或其他框架使用。如果您需要将其直接集成到 Vue3 中，请明确告诉我，我会调整回答。

以下是以资深软件开发工程师的视角，对“Google Maps 基础”的专业回答。我将详细讲解 Google Maps API 的核心概念、基本用法和简单示例，结合 HTML5，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 17 日的最新信息，以 Google Maps JavaScript API 为基准。

Google Maps 基础

目录

  1. 引言
  2. Google Maps 概述
  3. 准备工作
  1. Google Maps 核心功能
  1. 完整示例
  2. 与旧版 API 的差异
  3. 最佳实践与注意事项
  4. 结论

1. 引言

Google Maps JavaScript API 是一个强大的工具，用于在网页中嵌入交互式地图。它提供了地图显示、标记、事件处理等功能，广泛应用于定位、导航和地理可视化场景。本教程将介绍其基础知识，帮助您快速上手。

2. Google Maps 概述

  • 定义：Google Maps JavaScript API 是 Google 提供的一个前端 API，用于在网页中渲染地图并实现交互功能。
  • 特点：
  • 动态地图：支持缩放、拖动和多种视图（如卫星图）。
  • 可定制：添加标记、覆盖物和自定义样式。
  • 事件驱动：响应用户操作（如点击、拖动）。
  • 用途：展示位置、规划路线、地理数据可视化等。

3. 准备工作

3.1 获取 API 密钥

  1. 访问 Google Cloud Console：前往 cloud.google.com/maps-platform。
  2. 启用 API：创建项目并启用 “Maps JavaScript API”。
  3. 创建密钥：在“凭据”页面生成 API 密钥（如 YOUR_API_KEY）。
  4. 限制使用（可选）：绑定域名或 IP，确保安全性。

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：加载完成后调用的函数。

4. Google Maps 核心功能

4.1 创建地图

  • 语法：new google.maps.Map(element, options)
  • 选项：
    属性 作用 示例值
    center 地图中心坐标 { lat: 40.7128, lng: -74.0060 }
    zoom 缩放级别（0-20） 12
    mapTypeId 地图类型 google.maps.MapTypeId.ROADMAP示例： function initMap() { 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 控件与交互
        • 内置控件：缩放按钮、地图类型切换等。
        • 禁用控件：
        const map = new google.maps.Map(document.getElementById('map'), { center: { lat: 40.7128, lng: -74.0060 }, zoom: 12, zoomControl: false, // 禁用缩放控件 streetViewControl: false // 禁用街景 }); 5. 完整示例 以下是一个基础的 Google Maps 示例： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google Maps 基础</title> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <h1>Google Maps 示例</h1> <div id="map"></div> <script> function initMap() { const map = new google.maps.Map(document.getElementById('map'), { center: { lat: 39.9042, lng: 116.4074 }, // 北京 zoom: 12 }); // 添加标记 const marker = new google.maps.Marker({ position: { lat: 39.9042, lng: 116.4074 }, map: map, title: '北京' }); // 监听点击事件 google.maps.event.addListener(map, 'click', (event) => { const lat = event.latLng.lat(); const lng = event.latLng.lng(); alert(`点击位置: ${lat}, ${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） 加载方式 静态 <script> 支持异步加载 功能 基础地图和标记 丰富功能（如 Places API） 性能 较慢 更快，优化加载和渲染 文档 分散 统一在 Google Cloud
        • 关键变化：新版 API 更现代化，支持更多功能。
        7. 最佳实践与注意事项
        • 密钥安全：限制 API 密钥使用范围，避免泄露。
        • 异步加载：使用 async defer 提升页面性能。
        • 错误处理：添加加载失败的回调：
        window.initMap = function() { /* 正常逻辑 */ }; window.onerror = function() { alert('地图加载失败'); };
        • 移动端适配：设置响应式样式（如 width: 100%）。
        • 文档参考：查阅 Google Maps API 文档。
        8. 结论 Google Maps 基础功能简单易用，通过创建地图、添加标记和监听事件，您可以快速实现交互式地图。本教程提供了入门知识和示例代码。如需在 Vue3 中集成，可参考 在 Vue3 中使用 Google 地图事件，或提出具体需求，我将继续提供帮助！ 回答特点
        • 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
        • 实用性：从准备到实践，覆盖 Google Maps 基础全貌。
        • 内部链接：通过 <a href="#ID"> 跳转，如 Google Maps 核心功能。
        • 出站链接：嵌入正文，指向权威资源。