📌  相关文章
📜  获取标记 id 谷歌地图 (1)

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

获取标记 ID 谷歌地图

如果你想在谷歌地图上添加标记并获取该标记的 ID，那么你来对地方了！本篇文章将会向您介绍如何在谷歌地图上添加标记，并获取其对应的 ID 编号。

步骤 1：创建一个谷歌云平台帐号并启用 Maps JavaScript API

在您开始之前，您需要创建一个谷歌云平台账号并启用 Maps JavaScript API。您可以在下面的链接上创建新的谷歌云平台账号：

https://cloud.google.com/maps-platform/

步骤 2：获取谷歌提供的JavaScript API密钥

要开始在谷歌地图上添加标记并获取其 ID，您需要使用谷歌 Maps JavaScript API 密钥，该密钥可以通过谷歌云平台控制台获取。

获取API密钥

要获取 API 密钥，请遵循以下步骤：

  1. 访问 谷歌云平台控制台

  2. 在顶部的菜单中，选择“API 和服务”，然后选择“凭据”。

  3. 在您的“凭据”页面上，单击“创建凭据”，并选择“API 密钥”。 如果您已经有 API 密钥，则可以跳过此步骤。

  4. 此时您将获得您的 API 密钥。请确保您将其保存在安全的地方。

步骤 3：在 Web 页面上添加地图

要使用谷歌地图 API，您需要在您的 Web 页面上添加一个地图。您可以使用以下代码示例来添加地图：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
  function initMap() {
    var myLatLng = {lat: 1.290270, lng: 103.851959};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });

    console.log("Marker ID: " + marker.getPlace().place_id);
  }
</script>

<body onload="initMap()">
  <div id="map" style="height: 100%;"></div>
</body>

请注意，您需要将 YOUR_API_KEY 替换为您的 Maps JavaScript API 密钥。

步骤 4：添加标记并获取其 ID

要在地图上添加标记并获取其 ID，您需要在上面的示例代码中使用 google.maps.Marker 类。 为了获取标记的 ID，您可以使用 getPlace() 函数来获取关于标记的信息，其中包括地址和 ID。

在您添加 var marker = new google.maps.Marker({...}) 代码行之后，添加以下代码来获取标记 ID：

console.log("Marker ID: " + marker.getPlace().place_id);

如果您在 Google Maps 地方分发 API 中提供了下列属性中的一个或多个，您将能够获取 Place ID：

  • placeId: string
  • place: Place
  • origin: LatLng
  • destination: LatLng
  • location: LatLng
  • stopover: boolean

此外，如果您使用 google.maps.Map 构造函数的 place 选项，您也可以直接通过 place_id: string 属性来获取其 Place ID。

结论

通过按照上述步骤，在谷歌地图上添加标记并获取其 ID 就非常简单了！记得使用谷歌 Maps JavaScript API 并按照 API 的使用方式使用它。

完整的示例代码请见 GitHub。