HTML 如何通过经纬度设置谷歌地图标记并提供信息气泡

在本文中，我们将介绍如何使用HTML通过经纬度在谷歌地图上设置标记，以及如何为这些标记提供信息气泡。

阅读更多：HTML 教程

谷歌地图API

谷歌地图提供了丰富的API来帮助开发者在网页中嵌入和定制地图。使用谷歌地图API，我们可以通过经纬度设置地图上的标记，并为这些标记提供各种自定义的信息。

设置地图

首先，我们需要在HTML文档中引入谷歌地图的API。在<head>标签中添加以下代码：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

请替换YOUR_API_KEY为你的谷歌地图API密钥。如果你还没有API密钥，可以按照谷歌地图API的文档申请一个。

接下来，在<body>标签中添加一个用于显示地图的<div>元素，并指定其大小和样式：

<div id="map" style="width: 800px; height: 600px;"></div>

在接下来的JavaScript代码中，我们将使用该<div>元素的ID来选择并操作地图。

设置地图标记

要在地图上设置标记，我们首先需要获取地图对象。在JavaScript代码中，使用google.maps.Map类的构造函数来创建一个地图实例：

<script>
var map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 40.7128, lng: -74.0060 },
  zoom: 12
});
</script>

上面的代码会在地图上显示一个位于纽约市中心的标记，初始缩放级别为12。

接下来，我们可以使用google.maps.Marker类来创建一个标记对象，并设置其经度和纬度坐标：

<script>
var marker = new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: map,
  title: "纽约市"
});
</script>

在上面的代码中，position属性指定了标记的经纬度坐标，map属性指定了该标记所属的地图实例，title属性指定了标记悬停时显示的文本。

可以根据需要创建多个标记，并将它们添加到地图上。

提供信息气泡

在地图上点击标记时，我们通常希望显示一些附加信息。这可以通过信息窗口（InfoWindow）来实现。

首先，我们需要创建一个信息窗口对象，并设置其内容：

<script>
var infoWindow = new google.maps.InfoWindow({
  content: "这是一个标记的信息气泡！"
});
</script>

在上面的代码中，content属性指定了信息窗口的内容。

接下来，我们可以为标记添加一个点击事件监听器，在点击事件发生时显示信息窗口：

<script>
marker.addListener("click", function() {
  infoWindow.open(map, marker);
});
</script>

现在，当我们点击地图上的标记时，会弹出一个包含指定内容的信息窗口。

示例说明

以下是一个完整的示例，在地图上创建两个标记，并为每个标记提供信息气泡：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Map Marker Example</title>
  </head>
  <body>
    <div id="map" style="width: 800px; height: 600px;"></div>
    <script>
      var map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 40.7128, lng: -74.0060 },
        zoom: 12
      });

      var marker1 = new google.maps.Marker({
        position: { lat: 40.7128, lng: -74.0060 },
        map: map,
        title: "纽约市"
      });

      var marker2 = new google.maps.Marker({
        position: { lat: 34.0522, lng: -118.2437 },
        map: map,
        title: "洛杉矶"
      });

      var infoWindow1 = new google.maps.InfoWindow({
        content: "这是纽约市的信息气泡！"
      });

      var infoWindow2 = new google.maps.InfoWindow({
        content: "这是洛杉矶的信息气泡！"
      });

      marker1.addListener("click", function() {
        infoWindow1.open(map, marker1);
      });

      marker2.addListener("click", function() {
        infoWindow2.open(map, marker2);
      });
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  </body>
</html>