在颤动的谷歌地图上显示当前位置 (1)

📌 相关文章

📜 在颤动的谷歌地图上显示当前位置 (1)

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

在颤动的谷歌地图上显示当前位置

Google 地图是一款广泛使用的地图应用程序，可以显示世界各地的街道、交通、地形和卫星图像，而现在，我们可以使用 Google 地图 API，以编程方式在你的 Web 应用程序中显示地图，并将当前位置在地图上标记出来。

步骤

以下是在颤动的谷歌地图上显示当前位置的简单步骤：

创建一个 Google Cloud APIs 项目并启用地图 JavaScript API。
在你的 Web 应用程序中嵌入 Google 地图。
使用 HTML5 Geolocation API 获取当前位置。
在谷歌地图上标注当前位置。

示例代码

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Display current location on Google Maps</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script src="script.js"></script>
</head>

<body onload="getLocation()">
  <div id="map"></div>
</body>

</html>

JavaScript

let map;
function initMap(latitude, longitude) {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: latitude, lng: longitude },
    zoom: 8,
  });

  new google.maps.Marker({
    position: { lat: latitude, lng: longitude },
    map,
    title: "You are here!",
  });
}

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;

  initMap(latitude, longitude);
}

解释

在此示例中，我们创建了一个 HTML 页面，以初始化 Google 地图和请求当前位置。在此 HTML 脚本中，我们包含了一个指向 Google 地图 API 的脚本链接。

在 script.js 中，我们已经定义了两个函数:

getLocation 函数，该函数使用 HTML5 Geolocation API 获取当前位置，并将 showPosition 函数作为回调函数传递。
showPosition 函数，该函数获取当前位置的经度和纬度，并将该位置作为标记在地图上。该函数调用了 initMap 函数，该函数接受经纬度作为其参数，并初始化地图。

在 initMap 函数中，我们初始化谷歌地图并在该位置上创建标记。