谷歌地图信息窗口悬停 - Javascript(1)

📌 相关文章

📜 谷歌地图信息窗口悬停 - Javascript(1)

📅 最后修改于: 2023-12-03 15:12:12.621000 🧑 作者: Mango

谷歌地图信息窗口悬停 - Javascript

本文将介绍如何使用Javascript在谷歌地图上实现信息窗口悬停的功能。

前提要求

在开始编码前，我们需要了解一些前置知识：

步骤

1. 加载地图

在HTML文档中插入一个包含Google地图API的<script>标签，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Info Window Hover</title>
    <style>
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  </body>
</html>

注意：YOUR_API_KEY需要替换为您自己的API密钥。

2. 创建地图和信息窗口

在Javascript代码中创建一个google.maps.Map对象和一个google.maps.InfoWindow对象，如下所示：

// Create a map object
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 15,
  center: { lat: 37.7749, lng: -122.4194 },
});

// Create an info window object
var infoWindow = new google.maps.InfoWindow();

注意：这里的zoom和center参数可以替换为其他的值，根据实际情况而定。

3. 添加标记和信息窗口内容

在地图上添加一个标记，并且为标记添加一个事件监听器。在事件监听器中，设置信息窗口的内容并且打开信息窗口，如下所示：

// Create a marker and add it to the map
var marker = new google.maps.Marker({
  position: { lat: 37.7749, lng: -122.4194 },
  map: map,
});

// Add a listener for the marker hover event
google.maps.event.addListener(marker, "mouseover", function () {
  infoWindow.setContent("<strong>San Francisco</strong><br/>California");
  infoWindow.open(map, marker);
});

// Add a listener for the marker click event to close the info window when the marker is clicked
google.maps.event.addListener(marker, "click", function () {
  infoWindow.close();
});

注意：这里的marker位置参数也可以替换为其他的值，根据实际情况而定。在事件监听器中可以自定义信息窗口的内容。

4. 完整代码

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Info Window Hover</title>
    <style>
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
      var map;
      var infoWindow;

      function initMap() {
        // Create a map object
        map = new google.maps.Map(document.getElementById("map"), {
          zoom: 15,
          center: { lat: 37.7749, lng: -122.4194 },
        });

        // Create an info window object
        infoWindow = new google.maps.InfoWindow();

        // Create a marker and add it to the map
        var marker = new google.maps.Marker({
          position: { lat: 37.7749, lng: -122.4194 },
          map: map,
        });

        // Add a listener for the marker hover event
        google.maps.event.addListener(marker, "mouseover", function () {
          infoWindow.setContent("<strong>San Francisco</strong><br/>California");
          infoWindow.open(map, marker);
        });

        // Add a listener for the marker click event to close the info window when the marker is clicked
        google.maps.event.addListener(marker, "click", function () {
          infoWindow.close();
        });
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </body>
</html>

结论

现在，您已经学会了如何在谷歌地图上使用Javascript实现信息窗口悬停的功能。当将鼠标悬停在标记上时，信息窗口将打开，并且在单击标记时，窗口将关闭。您可以自定义信息窗口的内容和标记的位置，以适应您的应用程序的需求。