谷歌地图反应搜索地点 - Javascript(1)

📌 相关文章

📜 谷歌地图反应搜索地点 - Javascript(1)

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

使用谷歌地图API反应搜索地点 - JavaScript

当我们在谷歌地图上搜索某个地点时，谷歌地图会反应出搜索结果的地点信息与标记。今天，我们将使用谷歌地图API，使用JavaScript语言编写代码，实现搜索某个地点并在地图上标记它的功能。

步骤一：引用谷歌地图API

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

注意，YOUR_API_KEY替换为你的API密钥。如果你没有API密钥，可以在谷歌地图开发者平台进行申请。

步骤二：创建谷歌地图对象

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE },
  zoom: 8,
});

注意，YOUR_LATITUDE和YOUR_LONGITUDE替换为你所在地的经纬度。

步骤三：创建搜索框并监听输入事件

const searchInput = document.getElementById("search-input");
const searchBox = new google.maps.places.SearchBox(searchInput);

searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length === 0) {
    return;
  }

  const bounds = new google.maps.LatLngBounds();
  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const marker = new google.maps.Marker({
      map,
      title: place.name,
      position: place.geometry.location,
    });

    bounds.extend(place.geometry.location);

    map.fitBounds(bounds);
  });
});

这里，我们创建了一个输入框searchInput，并创建了一个谷歌地图中的搜索框searchBox。在搜索框中输入任何地点时，触发places_changed事件，我们将获取到搜索结果中的地点数组places，并遍历它，对每个地点在地图上标记出来。此外，我们使用LatLngBounds将所有标记居中展示。

步骤四：创建HTML结构

<input type="text" id="search-input" placeholder="Search places" />

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

这里创建了一个搜索框和一个地图容器。

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Google Maps Search Demo</title>
    <style>
      #map {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <input type="text" id="search-input" placeholder="Search places" />

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

    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE },
          zoom: 8,
        });

        const searchInput = document.getElementById("search-input");
        const searchBox = new google.maps.places.SearchBox(searchInput);

        searchBox.addListener("places_changed", () => {
          const places = searchBox.getPlaces();

          if (places.length === 0) {
            return;
          }

          const bounds = new google.maps.LatLngBounds();
          places.forEach((place) => {
            if (!place.geometry || !place.geometry.location) {
              console.log("Returned place contains no geometry");
              return;
            }

            const marker = new google.maps.Marker({
              map,
              title: place.name,
              position: place.geometry.location,
            });

            bounds.extend(place.geometry.location);

            map.fitBounds(bounds);
          });
        });
      }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places"></script>
  </body>
</html>

结语

现在，你可以在你的网页上添加搜索框，通过调用谷歌地图API，在地图上标记出搜索结果中的地点。希望这篇文章能对你有所帮助！