Google 地图 API 学习笔记

介绍

Google 地图 API 是一个非常流行的地图应用程序接口，它允许开发人员在自己的网站上嵌入 Google 地图。使用 Google 地图 API，您可以创建交互式地图，为商家提供商店定位和方向，显示地图标记和提供街景体验等功能。

使用步骤

注册并获取 API 密钥
在 HTML 页面中嵌入 Google 地图
自定义地图

注册并获取 API 密钥

要使用 Google 地图 API，您需要注册一个 Google Cloud 帐户并获取一个 API 密钥。API 密钥是一个唯一的身份验证令牌，用于区分您的应用程序并跟踪 API 使用情况。

在 HTML 页面中嵌入 Google 地图

使用下面的代码来嵌入一个基本的 Google 地图：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <title>Google Maps API Example</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {lat: 37.7749, lng: -122.4194}
      });
    }
  </script>
</head>
<body onload="initMap()">
  <div id="map" style="height: 500px;"></div>
</body>
</html>

自定义地图

除了基本的地图功能，您还可以根据需要自定义地图。例如，您可以添加标记、信息窗口、聚合标记等。

下面是一个添加标记的示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <title>Google Maps API Example</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {lat: 37.7749, lng: -122.4194}
      });
  
      // 添加标记
      var marker = new google.maps.Marker({
        position: {lat: 37.7749, lng: -122.4194},
        map: map,
        title: 'San Francisco'
      });
    }
  </script>
</head>
<body onload="initMap()">
  <div id="map" style="height: 500px;"></div>
</body>
</html>

结论

Google 地图 API 提供了广泛的功能，使开发人员能够在自己的网站中灵活地使用地图功能。这些功能包括自定义标记、信息窗口、路线规划、街景体验等。