javascript - Google Maps API v3 第二次 map 调整大小和居中

Question

我忘记了 WordPress 上的嵌入 map 并转移到了 google map api v3。所以，我正在使用这个:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

这个函数:

function initialize() {

//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
var myLatlng = new google.maps.LatLng(40.654372, -7.914174);
var myLatlng1 = new google.maps.LatLng(30.654372, -6.914174);
    var myOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var myOptions1 = {
      zoom: 16,
      center: myLatlng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

//here's where we call the marker.
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1);
 //google.maps.event.trigger(map1, 'resize');
 //map1.setCenter(myLatlng1);

        var marker = new google.maps.Marker({
      position: myLatlng,
      title:"ADD TITLE OF YOUR MARKER HERE"
  });

        var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '<\/div>'+
    '<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
    '<div id="bodyContent">'+
    '<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
    '<\/div>'+
    '<\/div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});      

  // To add the marker to the map, call setMap();
  marker.setMap(map);  
  }

  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
  }

  window.onload = loadScript;

如您所见，声明了两个 map 。在我的网站上，我使用水平选项卡来交替显示 map 。

这个问题是我在其他主题中发现的，但那里给出的解决方案似乎不起作用。正如您在我评论的行中看到的:

//google.maps.event.trigger(map1, 'resize');

//map1.setCenter(myLatlng1);

此代码无法使第二张 map 居中。 map 与 div 不匹配，中心图标位于左 Angular ，这是常见问题。

我想您已经知道问题是什么，但是如果您需要图片，我会毫无问题地提供它们。

选项卡代码在 WordPress 上的外观:

    [wptabs type="accordion" mode="horizontal"]

[wptabtitle] Portugal[/wptabtitle] [wptabcontent]

<div id="map_canvas" style="width: 100%; height: 300px; border: 1px solid;"></div>
[/wptabcontent]

[wptabtitle] Brasil[/wptabtitle] [wptabcontent]

<div id="map_canvas1" style="width: 100%; height: 300px; border: 1px solid;"></div>

[/wptabcontent]

[/wptabs]

Answer 1

好吧，看来这个插件使用jQuery UI ，那么你可以这样做:

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "tab-map-2") {
        google.maps.event.trigger(map1, 'resize');
        map1.setCenter(myLatlng1);
    }
});

其中 #tabs 是外部 div ID，tab-map-2 是第二个 map 的选项卡面板 ID。

希望这有帮助。