如何使用 JQuery 向谷歌地图添加标记

如果想要在网页上展示地图，并且在地图上添加标记，可以通过 Google Maps API 来实现。本文将介绍如何使用 JQuery 和 Google Maps API 向谷歌地图添加标记。

准备工作

首先，需要在 Google Cloud Platform 上创建一个项目，选择 Maps JavaScript API 并开启，获取 API Key。

然后，在需要展示地图的 HTML 文件中，添加以下代码：

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

将 YOUR_API_KEY 替换为你的 API Key。

添加地图

接着，在 JavaScript 文件中，添加以下代码：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 37.7749, lng: -122.4194}
  });
}

其中，map 是一个 Google Maps 对象，document.getElementById('map') 表示将地图展示在 HTML 中 id 为 map 的元素上，zoom 表示地图的缩放级别，center 表示地图的中心位置。

添加标记

使用以下代码，向地图上添加标记：

var marker = new google.maps.Marker({
  position: {lat: 37.7749, lng: -122.4194},
  map: map,
  title: 'San Francisco'
});

其中，lat 和 lng 分别表示标记的纬度和经度，map 表示标记应该添加到哪个地图上，如果设置为 null，则不会显示在任何地图上，title 表示鼠标悬停在标记上时显示的文本。

完整代码

将以上代码整合在一起，得到完整代码如下：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 37.7749, lng: -122.4194}
  });
  var marker = new google.maps.Marker({
    position: {lat: 37.7749, lng: -122.4194},
    map: map,
    title: 'San Francisco'
  });
}

将以上代码添加到 HTML 文件中，在 body 标签的尾部添加以下代码：

<div id="map" style="height: 500px;"></div>

然后在 head 标签中引入 jQuery 库：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

结论

通过以上步骤，可以在网页上添加 Google 地图和标记。实际应用中，可以根据需要调整地图的缩放级别、中心位置和标记的位置、文本等属性，来满足具体需求。