Question

我在jQuery UI标签中有谷歌地图。这意味着在用户更改选项卡之前，地图最初是隐藏的。当发生这种情况时，我在新显示的地图上触发resize事件以显示图块并使地图正常工作。这很有效，我正在做这样的部分

切换jQuery选项卡时调用该函数，刷新新显示的地图。

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

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

Answer 1

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

工作示例：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

＆＃34;显示＆＃34;内的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

代码段

＆＃13;

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);
    }
  });
});

＆＃13;

<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>

＆＃13;

Google地图setCenter特定地图

2 个答案: