Google 地图参考手册学习笔记

介绍

Google 地图是一款全球知名的地图应用，它可以帮助用户快速查找地点、规划路线、了解交通等信息。本文档旨在帮助读者更好地理解 Google 地图并能够灵活地使用其相关功能。

常用功能

显示地图

要在网页上显示一个 Google 地图，需要使用如下代码：

htmlCopy Code
<div id="map"></div>

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

其中 YOUR_API_KEY 指的是你的 Google Maps API 密钥。

在上面的示例代码中，我们创建了一个 div 元素，将其 id 设置为 map，表示将在该元素内显示地图。接着，我们定义了一个 initMap 函数，该函数会在 Google Maps API 加载完成后被调用，在该函数内部创建了一个地图对象，并将其显示在 map 元素中。

标记地点

我们可以使用 Marker 类在地图上标记一个位置，例如：

htmlCopy Code
<div id="map"></div>

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });

    var marker = new google.maps.Marker({
      position: {lat: -34.397, lng: 150.644},
      map: map
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

在上面的示例代码中，我们使用 Marker 类创建了一个标记，指定了其位置和地图对象，并将其显示在地图上。

路线规划

我们可以使用 DirectionsService 类来规划两点之间的路线，例如：

htmlCopy Code
<div id="map"></div>

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });

    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    });

    directionsService.route({
      origin: {lat: 37.7749, lng: -122.4194},
      destination: {lat: 37.8199, lng: -122.4783},
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

在上面的示例代码中，我们创建了一个 DirectionsService 对象和一个 DirectionsRenderer 对象，用于处理路线规划和结果显示。接着，我们调用 directionsService.route 方法，指定起点、终点和交通方式等参数，并在回调函数中根据 status 判断是否成功获取路线信息，并将结果传递给 directionsDisplay 对象进行显示。

结论

本文档介绍了 Google 地图的常用功能，并提供了相应的示例代码。希望能够帮助读者更好地理解并使用 Google 地图。