谷歌地图 setCenter 特定地图

Question

我在 jQuery UI 选项卡中有 Google 地图。这意味着地图最初是隐藏的，直到用户更改选项卡。发生这种情况时，我会在新显示的地图上触发调整大小事件以显示图块并让地图正常工作。这很好用，我正在这样做

该函数在 jQuery 选项卡切换时调用，刷新新可见的地图。

问题是地图没有以标记为中心，所以除了调用'resize'事件外，我还需要将地图居中。 但是如何将地图仅在新可见的容器中居中，而不是其他任何容器？我尝试在调整大小事件下方添加this.setCenter(latlng);，但这不起作用。

如果您单击“显示”按钮，第一张地图会立即显示，我会调用 resize 事件并加载图块，但您可以看到它没有以元素标记为中心。

Answer 1

我认为你想多了这个问题，我重构了你的代码并重用了你已经必须让它按预期工作的东西，你所要做的就是在元素显示在屏幕上时调用相同的函数

p>

工作示例：http://codepen.io/anon/pen/OyGLxV?editors=001

基本上就是这样：

$("button").on("click", function() {
  $(".google-maps-embed").toggle();
  // refresh
  $(".google-maps-embed").each(function() {
     createMap(this);
  });
});

而你的 createMap 函数将是

function createMap(el) {
        var $this = $(el);
        var data = $this.data();
        map = new google.maps.Map(el);

        var scrollzoom = data.scrollzoom;
        var hidecontrols = data.hidecontrols;
        var zoom = data.zoom;
        var lat = data.lat || 40.7577;
        var lng = data.lng || -73.9857;
        var marker = data.usemarker;
        latlng = {lat:lat, lng:lng};

        map.setOptions({
            scrollwheel: scrollzoom || false,
            center: new google.maps.LatLng(lat, lng),
            disableDefaultUI: hidecontrols || false,
            zoom: zoom || 10
        });

        if( marker == true ) {
            var marker = new google.maps.Marker({
                position: {lat:lat, lng:lng},
                map: map
            });
        }

        // refresh maps
        google.maps.event.addListenerOnce(map, "idle", function() {
            google.maps.event.trigger(this, "resize");
            this.setCenter(latlng);
        });

        $this.addClass("map-initialized");
    }

Answer 2

“show”处理程序中的this 不是google.maps.Map

// show
$("button").on("click", function() {
  $(".google-maps-embed").show();
  // refresh
  var hiddenGmap = $(".google-maps-embed");
  hiddenGmap.each(function() {
    google.maps.event.trigger(this, "resize"); // TRIGGER RESIZE
    // SET CENTER ALSO, BUT HOW?
  });
});

要重新定位地图，您需要保留对地图对象的引用，您确实有一个全局 map 变量，但您有两个地图，因此被覆盖并且不能用于访问第一个map.

一种选择是创建一个google.maps.Map 对象数组并遍历它们，将初始中心保存为地图的属性（在本例中为._initCenter）。您还可以使用唯一标识来索引数组。

working jsfiddle

代码 sn-p：

var maps = [];

function GMapsInit() {
  GMapsLoaded = true;
  $(".google-maps-embed").each(function() {
    var $this = $(this);
    var data = $this.data();
    var map = new google.maps.Map(this);
    maps.push(map);

    var scrollzoom = data.scrollzoom;
    var hidecontrols = data.hidecontrols;
    var zoom = data.zoom;
    var lat = data.lat || 40.7577;
    var lng = data.lng || -73.9857;
    var marker = data.usemarker;
    latlng = {
      lat: lat,
      lng: lng
    };

    map.setOptions({
      scrollwheel: scrollzoom || false,
      center: new google.maps.LatLng(lat, lng),
      disableDefaultUI: hidecontrols || false,
      zoom: zoom || 10
    });
    map._initCenter = map.getCenter();

    if (marker === true) {
      marker = new google.maps.Marker({
        position: {
          lat: lat,
          lng: lng
        },
        map: map
      });
    }

    // refresh maps
    google.maps.event.addListenerOnce(map, "idle", function() {
      google.maps.event.trigger(this, "resize");
      this.setCenter(latlng);
    });

    $this.addClass("map-initialized");
  });
}
GMapsInit();

// show
$("button").on("click", function() {
  $(".google-maps-embed").show(function() {
    for (var i = 0; i < maps.length; i++) {
      google.maps.event.trigger(maps[i], "resize"); // TRIGGER RESIZE
      maps[i].setCenter(maps[i]._initCenter);
    }
  });
});

<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>
<h1>HIDDEN MAP IS CENTERED (marker at map center)</h1>

<div class="google-maps-embed" data-pb-element data-pb-options data-pb-topbottomspacing-option data-pb-element-versions="2" data-pb-no-url data-pb-no-img-option data-pb-no-css-option data-pb-height-option="Map Height" data-hidecontrols="false" data-scrollzoom="false"
data-lat="40.7577" data-lng="-73.9857" data-zoom="13" data-usemarker="true" data-clone-no data-pb-element-type="embed-element" style="width:100%; height: 450px; display: none;"></div>
<button>SHOW</button>

<h1>VISIBLE MAP</h1>

<div class="google-maps-embed" data-pb-element data-pb-options data-pb-topbottomspacing-option data-pb-element-versions="2" data-pb-no-url data-pb-no-img-option data-pb-no-css-option data-pb-height-option="Map Height" data-hidecontrols="false" data-scrollzoom="false"
data-lat="40.7577" data-lng="-73.9857" data-zoom="13" data-usemarker="true" data-clone-no data-pb-element-type="embed-element" style="width:100%; height: 450px;"></div>