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

Question

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

下面是创建地图对象的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

你应该trigger在resize-callback 中的 map的complete-event$.fadeIn()

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