麻烦在一张桌子上有多个谷歌地图

Question

我有一个html表，其中包含10个Google地图容器

下面是创建地图对象的js函数

函数使用map的lat和lng + div元素将地图插入。

      function GetMap(lat,lng,number) 
      {
        var show_in=document.getElementsByClassName("map_conteiner")[number];
        var mapOptions = {
          center: new google.maps.LatLng(lat, lng),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(show_in,
            mapOptions);

        var marker = new google.maps.Marker({
             position:new google.maps.LatLng(lat,lng),
             map: map,
             title:"Hotel"
           });

          $(show_in).fadeIn();
      }

问题是只有在第一次调用此函数时才能正确显示地图

（无论我从哪个div开始）

在第一次调用之后，这个函数将总是呈现扭曲的地图（正如你在附图中看到的那样）

Answer 1

你应该trigger resize - complete中的地图事件 - $.fadeIn()的回调

此外，您最好为每个map_conteiner仅创建一个地图实例，并且在GetMap的后续调用中，仅设置现有地图的新center和新的position为标记。