一张桌子上有多个谷歌地图的问题

Question

我有一个包含 10 个 Google 地图容器的 html 表

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

函数采用地图的 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

你应该triggerresize-complete-callback 中的map 事件$.fadeIn()

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