📌  相关文章
📜  如何在不使用 API 密钥的情况下在 html 页面中添加 Google 地图？(1)

📅  最后修改于: 2023-12-03 14:52:53.220000             🧑  作者: Mango

如何在不使用 API 密钥的情况下在 HTML 页面中添加 Google 地图？

当我们要在HTML页面中添加Google地图时，通常需要使用Google Maps API和API密钥。但是，有时我们可能没有API密钥或不想使用它。在这种情况下，我们可以使用Google Maps JavaScript API的简化版本，该版本不需要 API 密钥。以下是如何在HTML页面中添加Google地图的步骤：

步骤 1：引入 Google Maps API

在HTML页面的 <head> 部分中引入 Google Maps JavaScript API：

<head>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
步骤 2：添加地图容器

在HTML页面中添加一个用于容纳地图的 div 元素，例如：

<div id="googleMap" style="width:100%;height:400px;"></div>

请注意，我们在这里通过 style 属性将 div 元素的宽度设置为 100％，高度设置为 400 像素。

步骤 3：初始化地图

在 <script> 标记中初始化地图并指定要在其中显示地图的 div 元素。例如：

<script>
  function initMap() {
    // 指定地图容器
    var mapContainer = document.getElementById("googleMap");
    // 初始化地图
    var map = new google.maps.Map(mapContainer, {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>

在此示例中，我们通过 document.getElementById() 方法获取了 div 元素，并创建了一个新的 Google 地图实例。我们还指定了地图应该显示在哪里（经纬度）以及使用缩放级别 8 显示的区域。

请注意，我们在HTML页面的 <body> 标记中向 Google Maps JavaScript API 添加了以下 onload 事件处理程序：

<body onload="initMap()">

这将在页面加载时调用 initMap() 方法并加载地图。

步骤 4：运行 HTML 页面和查看 Google 地图

保存上述HTML代码，将其保存为 .html 文件并在浏览器中打开。现在，我们将在您的 HTML 页面上看到 Google 地图。

以上就是如何在不使用 Google Maps API 密钥的情况下，在 HTML 页面中添加 Google 地图的步骤。