Google Maps API v3-在一页上创建带有标记的多张地图

debugcn 发表于 Dev

焓值

我正在尝试创建一个包含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);

工作小提琴

代码段：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。