Question

我忘了在wordpress上嵌入地图并转移到谷歌地图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;

如您所见，声明了两个地图。我的网站，我正在使用水平标签在显示地图之间交替。

这个问题是我在其他主题中找到的问题，但解决方案给出的似乎没有用。正如你在我评论的行中看到的那样：

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

// map1.setCenter（myLatlng1）;

此代码无法使第二张地图居中。地图不正确地适合div，中心图标位于左侧角落，这是常见的问题。

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

标签代码在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 是第二张地图的标签面板ID。

希望这有帮助。

Google Maps API v3第二张地图调整大小和中心

1 个答案: