Question

如何在单个页面上有多个地图的地图标记重新定位？我创建的这个脚本按预期工作，我在页面上有所有单独的地图，每个地图都有自己的标记，这可以按预期工作。

我遇到的问题是我的addDomListener只在我页面的最后一张地图上工作。

这是用于动态生成地图的代码的示例HTML。

<div id="map0" class="google-map archive-map" data-lat="42.997394" data-lng="-78.180130">
<div id="map1" class="google-map archive-map" data-lat="41.997394" data-lng="-76.180130">
<div id="map2" class="google-map archive-map" data-lat="40.997394" data-lng="-74.180130">

这是我目前正在使用的Javascript：

function initMap() {

    var locations = [];

    // Get All Maps By Class Name
    var mapEl = document.getElementsByClassName("google-map");

    // For each map push data attribute to locations array
    $(mapEl).each(function() {
        var arr = [];
        arr.push(parseFloat(this.dataset.lat));
        arr.push(parseFloat(this.dataset.lng));
        locations.push(arr)
    });

    // Loop through each location and generate map
    for (var i = 0; i < locations.length; i++) {

        var latlng = {lat: locations[i][0], lng: locations[i][1]};

        var mapOptions = {
            center: latlng,
            mapTypeControl: false,
            scrollwheel: false,
            zoom: 14,
            zoomControl: false,
            styles: mapBrand
        };

        var map = new google.maps.Map(document.getElementById('map'+i), mapOptions);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });

    }

    var center = map.getCenter();

    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(center);
    });

}

如何将个人地图的标记居中？

Answer 1

您需要保留对所有地图的引用以及每个地图所需的中心，然后处理这些地图（为每个地图设置中心）。

// keep reference to map and center
var map = new google.maps.Map(document.getElementById('map' + i), mapOptions);
maps.push({map: map, center: map.getCenter()});

// process through all the maps, setting the center
google.maps.event.addDomListener(window, 'resize', function() {
  for (var i = 0; i < maps.length; i++) {
    maps[i].map.setCenter(maps[i].center);
  }
});

proof of concept fiddle

代码段

function initMap() {

  var locations = [];
  var maps = [];
  // Get All Maps By Class Name
  var mapEl = document.getElementsByClassName("google-map");

  // For each map push data attribute to locations array
  $(mapEl).each(function() {
    var arr = [];
    arr.push(parseFloat(this.dataset.lat));
    arr.push(parseFloat(this.dataset.lng));
    locations.push(arr)
  });

  // Loop through each location and generate map
  for (var i = 0; i < locations.length; i++) {

    var latlng = {
      lat: locations[i][0],
      lng: locations[i][1]
    };

    var mapOptions = {
      center: latlng,
      mapTypeControl: false,
      scrollwheel: false,
      zoom: 14,
      zoomControl: false,
      // styles: mapBrand
    };

    var map = new google.maps.Map(document.getElementById('map' + i), mapOptions);
    maps.push({
      map: map,
      center: map.getCenter()
    });
    var marker = new google.maps.Marker({
      position: latlng,
      map: map
    });
  }

  var center = map.getCenter();

  google.maps.event.addDomListener(window, 'resize', function() {
    for (var i = 0; i < maps.length; i++) {
      maps[i].map.setCenter(maps[i].center);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#map0,
#map1,
#map2 {
  height: 30%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map0" class="google-map archive-map" data-lat="42.997394" data-lng="-78.180130"></div>
<div id="map1" class="google-map archive-map" data-lat="41.997394" data-lng="-76.180130"></div>
<div id="map2" class="google-map archive-map" data-lat="40.997394" data-lng="-74.180130"></div>

如何在页面上为多个Google地图添加DomListener？

1 个答案: