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

如果一页上有多个地图，我将如何重新设置地图标记的中心？我创建了一个脚本，它可以正常工作，我在页面上有所有单独的地图，每个地图都有自己的标记，它可以正常工作

我遇到的问题是，我的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);
    });

}

函数initMap（）{
var位置=[]；
//按类名获取所有映射
var mapEl=document.getElementsByClassName（“谷歌地图”）；
//对于每个地图，将数据属性推送到位置数组
$（mapEl）.each（函数（）{
var-arr=[]；
arr.push（parseFloat（this.dataset.lat））；
arr.push（parseFloat（this.dataset.lng））；
位置。推送（arr）
});
//循环遍历每个位置并生成地图
对于（变量i=0；i

---

如何才能使单个地图的标记居中？

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

---

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

感谢您的明确解释。无论出于何种原因，我得到以下控制台错误：uncaughtreferenceerror:google未定义如果异步加载API（

&callback=initMap async defer

），则不需要

google.maps.event.adddomstener（窗口“load”，initMap）在我的代码中。啊，我明白了。不使用回调并按您列出的方式执行是否更好？研究
异步延迟
（这就是谷歌现在所做的所有示例）当您更改方向时，移动设备上的窗口大小调整事件是否有延迟的原因？在您在设备上向上或向下滚动之前，地图似乎不会自行调整。谢谢您的明确解释。无论出于何种原因，我得到以下控制台错误：uncaughtreferenceerror:google未定义如果异步加载API（
&callback=initMap async defer
），则不需要
google.maps.event.adddomstener（窗口“load”，initMap）在我的代码中。啊，我明白了。不使用回调并按您列出的方式执行是否更好？研究
异步延迟
（这就是谷歌现在所做的所有示例）当您更改方向时，移动设备上的窗口大小调整事件是否有延迟的原因？在你在设备上向上或向下滚动之前，地图似乎不会自动调整。
// 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);
  }
});