jQuery 更新/重新加载标记，无需重新加载谷歌地图

在本文中，我们将介绍如何使用jQuery更新或重新加载地图标记，而无需重新加载整个谷歌地图。

谷歌地图是一种很常见的地图显示工具，用于在网页中显示地理位置和标记。在某些情况下，我们可能需要通过更新或重新加载标记来实时更新地图上的信息，而无需重新加载整个地图。使用jQuery可以很方便地实现这个目标。

使用Gooogle Maps API获取地图

首先，我们需要通过Google Maps API获取地图。在HTML文件中，我们需要包含以下script标签，将Google Maps API添加到我们的页面中：

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

请确保将YOUR_API_KEY替换为您自己的API密钥，以便正确加载地图。

然后，我们需要在页面中创建一个具有指定ID的div元素，作为地图的容器：

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

现在，我们已经准备好了开始使用jQuery更新或重新加载谷歌地图上的标记。

更新标记

假设我们有一个用来显示不同地点的地图，并且我们要根据用户的选择更新地图上的标记。

首先，我们需要使用Google Maps API创建地图对象，并将其存储在变量中：

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

这将创建一个位于旧金山的地图，并将其放大到缩放级别12。

然后，我们可以通过创建标记对象，并将其添加到地图上来显示地点标记：

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

此代码将在地图上添加一个标记，表示旧金山的位置。

现在，假设我们要根据用户的选择更改地图上的标记。我们可以使用jQuery监听用户选择的事件，然后更新标记的位置。例如，当用户选择了洛杉矶时，我们可以通过以下代码更新标记的位置：

$('#select-city').change(function() {
  var selectedCity = $(this).val();

  if (selectedCity === 'Los Angeles') {
    marker.setPosition({lat: 34.0522, lng: -118.2437});
    marker.setTitle('Los Angeles');
  }
});

这段代码将监听具有ID为select-city的下拉列表的change事件。当用户选择洛杉矶时，它将更新标记的位置和标题。通过调用marker.setPosition()和marker.setTitle()函数，我们可以更新标记的位置和标题，而无需重新加载整个地图。

重新加载标记

除了更新标记的位置外，有时我们也可能需要重新加载地图上的所有标记。这可能是因为我们有一组动态的标记，需要根据特定条件进行刷新。

要重新加载标记，我们首先需要将之前创建的标记对象存储在一个数组中：

var markers = [];

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

var marker2 = new google.maps.Marker({
  position: {lat: 34.0522, lng: -118.2437},
  map: map,
  title: 'Los Angeles'
});

markers.push(marker1);
markers.push(marker2);

这将创建两个标记，并将它们添加到地图上，并将这些标记存储在一个名为markers的数组中。

然后，当我们需要重新加载标记时，我们可以使用以下代码：

function reloadMarkers() {
  // 首先，删除地图上的所有标记
  markers.forEach(function(marker) {
    marker.setMap(null);
  });

  // 在此处根据条件重新添加标记
  // 例如：
  var newMarker = new google.maps.Marker({
    position: {lat: 39.9526, lng: -75.1652},
    map: map,
    title: 'Philadelphia'
  });

  markers.push(newMarker);
}

通过调用marker.setMap(null)函数，我们可以从地图上删除所有标记。然后，我们可以根据特定条件重新添加标记。在此示例中，我们添加了一个名为Philadelphia的标记。

通过调用reloadMarkers()函数，我们可以重新加载地图上的所有标记，而无需重新加载整个地图。