在上述代码中，如何实现地图上多个Marker的显示？

货源人·学电商2周前 (02-10)跨境杂谈

在跨境电商领域，地图展示是一种常见的需求。例如，当用户浏览商品时，希望看到商品的地理位置和位置信息。为了实现这一目标，我们可以使用地理编码服务（如Google Maps API）来获取商品的位置信息，并将其添加到地图上。

如果我们想要在地图上显示多个Marker，我们需要进行一些额外的操作。我们需要创建一个包含所有需要显示的Marker的列表。然后，我们可以使用循环遍历这个列表，为每个Marker分配一个唯一的ID，并将其添加到地图上。最后，我们可以使用JavaScript的setInterval函数来定期更新地图，以保持其实时性。

以下是一个使用JavaScript和HTML实现的示例代码：

<!DOCTYPE html><html><head>  <title>Multiple Markers on Google Maps</title>  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script></head><body>  <div id="map"></div>  <script>    var map;    function initMap() {      map = new google.maps.Map(document.getElementById("map"), {        center: {lat: -34.397, lng: 150.644},        zoom: 8      });      // Add multiple markers to the map      var markers = [        {position: {lat: -34.397, lng: 150.644}, name: "Marker 1"},        {position: {lat: -34.397, lng: 150.644}, name: "Marker 2"},        {position: {lat: -34.397, lng: 150.644}, name: "Marker 3"}      ];      for (var i = 0; i < markers.length; i++) {        var marker = new google.maps.Marker({          position: markers[i].position,          map: map,          title: markers[i].name        });      }      // Update the map every 5 seconds      var intervalId = setInterval(function() {        map.fitBounds(markers);      }, 5000);    }  </script></body></html>

在这个示例中，我们首先创建了一个包含三个Marker的列表。然后，我们使用for循环遍历这个列表，并为每个Marker分配一个唯一的ID。接下来，我们使用JavaScript的setInterval函数来定期更新地图，以保持其实时性。最后，我们使用Google Maps API的Map对象来添加Marker到地图上。