Question

我正在使用php while循环多次创建一个div类

所以每次我都有不同的lat lng

同样在每个循环中，我在不同的div上初始化一个新地图以创建地图这是我的代码

<script type="text/javascript">
          google.maps.event.addDomListener(window, 'load', initialize);

            function initialize() {

                var title= "Title";
                var lat = <?php echo $lat; ?>;
                var lng = <?php echo $lng; ?>;
                var myLatlng = new google.maps.LatLng(lat,lng);
                var mapOptions = {
                    zoom: 14,
                    center: myLatlng
                  }
                var map = new google.maps.Map(document.getElementById('beezMapBig<?php echo $tmp;?>'), mapOptions);

                var marker = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: 'Hello World!'
                    });
                google.maps.event.addDomListener(window, "resize", function() {
                    var center = map.getCenter();
                    google.maps.event.trigger(map, "resize");
                    map.setCenter(center); 
                }); 

            }


          </script>

每次负载使用不同的lat，lng但我没有加载100％的地图（由于声誉低，我无法发布图像...想象地图加载50％，其余灰色空白）

现在奇怪的是，当我在任何浏览器上按f12运行控制台以查看某些问题/失败时，地图会100％加载并调整大小。

为什么会出现这种情况以及运行浏览器控制台时代码运行正常的原因？

提前致谢!!

Answer 1

有同样的问题并通过这样做解决了。写ready()函数。然后将窗口调整大小函数放在initialize方法本身中（在初始化映射之前）。它会有所帮助。

Answer 2

我可以使用PHP和JS。我有3个元素的数组。

首先，我会生成具有唯一ID的div

   <?php $i=0; foreach ($array as $single) : $i++; ?>

      <div id="map_<?php echo $i; ?>" style="width: 100%; height: 300px;"></div>

    <?php endforeach; ?>

然后即时打开脚本标签

 <script>
    var maps = [];
    <?php $i = 0; foreach($array as $single): $i++; ?>
    maps.push({
      mapContainer: 'map_'+<?php echo $i; ?>,
      lat: <?php echo $single['mapa_google']['lat']; ?>,
      lng: <?php echo $single['mapa_google']['lng']; ?>,
    });
    <?php endforeach; ?>

   function initMap() {
     for(var i = 0; i < maps.length; i++)
     {
       // The location of Uluru
       var uluru = {lat: maps[i].lat, lng: maps[i].lng};
       // The map, centered at Uluru
       var map = new google.maps.Map(
         document.getElementById(maps[i].mapContainer), {zoom: 16, center: uluru}
       );
       // The marker, positioned at Uluru
       var marker = new google.maps.Marker({position: uluru, map: map});
     }
   }
 </script>

在页面底部，我使用异步脚本

   <script async defer
           src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
   </script>

当然，在我的数组中，我有3张Google地图的数据。

想用循环加载多个谷歌地图

2 个答案: