php – Google Maps API v3 – 在一个页面上创建带标记的多个地图

我正在尝试创建一个包含3张幻灯片的滑块,每张幻灯片都包含一个迷你地图,标记指向某个位置.我设法创建了一张幻灯片,但是每次尝试在此页面上创建多个幻灯片都会导致失败.
到目前为止,这是我的代码：

HTML PHP

<?php if (have_rows('job_offers')): ?>
  <?php
    $rows = get_field('job_offers');
    $row_count = count($rows);
      for ($i = 0; $i <= 2; $i++) {
  ?>
  <li>
  <div id='googleMap<?php echo $i; ?>' style="position:absolute;top:0;right:0;width:180px;height:100%;"></div>    
  </li>
  <?php } ?>
<?php endif; ?>    

和jQuery

var geocoder = new google.maps.Geocoder();
var map;
var locations = ["London",'Paris','Barcelona'];
var pos;

function initialize()
{
    google.maps.visualRefresh = true;
    getGeoCode();
}

function getGeoCode()
{
    for (var i=0; i<3 ; i++) {
    geocoder.geocode({'address': locations[i]}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK)
        {

            pos[i] = results[0].geometry.location;
            var mapOptions = {
                zoom: 8,
                center: pos[i],
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                styles: [
                    { stylers: [{hue:'#C4268C'},{lightness:-60},{saturation:100}]}
                ]
            };
            map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions);
            var image = '<?php echo get_template_directory_uri(); ?>/images/marker.png';
            var marker = new google.maps.Marker({
                position: pos[i],
                icon:image
            });

            marker.setMap(map[i]);

        }
        else
        {
            alert("Not found");
        }
    });
}
}
google.maps.event.addDomListener(window, 'load', initialize);

当我没有尝试使用数组时,一切都很好.
我会感激任何提示.
干杯,
E.

解决方法:

下面的代码修复了函数闭包的问题(makeMap函数在“i”的值上保持闭包,以便在地理编码器回调运行时使用)：

var geocoder = new google.maps.Geocoder();
var map = [];
var locations = ["London",'Paris','Barcelona'];
var pos = [];
var infowindow = new google.maps.InfoWindow({});

function initialize()
{
    google.maps.visualRefresh = true;
    getGeoCode();
}

function makeMap(i) {
    geocoder.geocode({'address': locations[i]}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK)
        {

            pos[i] = results[0].geometry.location;
            var mapOptions = {
                zoom: 8,
                center: pos[i],
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                styles: [
                    { stylers: [{hue:'#C4268C'},{lightness:-60},{saturation:100}]}
                ]
            };
            map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions);
            // var image = '<?php echo get_template_directory_uri(); ?>/images/marker.png';
            var marker = new google.maps.Marker({
                position: pos[i],
                // icon:image
            });

            marker.setMap(map[i]);

        }
        else
        {
            alert("Not found");
        }
    });
}
function getGeoCode()
{
    for (var i=0; i<3 ; i++) {
        makeMap(i);
}
}
google.maps.event.addDomListener(window, 'load', initialize);

Working fiddle

代码段：

var geocoder = new google.maps.Geocoder();
var map = [];
var locations = ["London", 'Paris', 'Barcelona'];
var pos = [];
var infowindow = new google.maps.InfoWindow({});

function initialize() {
  google.maps.visualRefresh = true;
  getGeoCode();
}

function makeMap(i) {
  geocoder.geocode({
    'address': locations[i]
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {

      pos[i] = results[0].geometry.location;
      var mapOptions = {
        zoom: 8,
        center: pos[i],
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        styles: [{
          stylers: [{
            hue: '#C4268C'
          }, {
            lightness: -60
          }, {
            saturation: 100
          }]
        }]
      };
      map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions);
      // var image = '<?php echo get_template_directory_uri(); ?>/images/marker.png';
      var marker = new google.maps.Marker({
        position: pos[i],
        // icon:image
      });

      marker.setMap(map[i]);

    } else {
      alert("Not found");
    }
  });
}

function getGeoCode() {
  for (var i = 0; i < 3; i++) {
    makeMap(i);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

#googleMap0,
#googleMap1,
#googleMap2,
#googleMap3 {
  width: 500px;
  height: 500px;
}

<script src="http://maps.google.com/maps/api/js"></script>
<table border="1">
  <tr>
    <td>
      <div id="googleMap0"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="googleMap1"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="googleMap2"></div>
    </td>
  </tr>
</table>

标签：php,jquery,google-maps,google-maps-api-3,google-maps-markers
来源： https://codeday.me/bug/20191003/1850159.html