谷歌地图调整大小

Google maps resize

本文关键字：调整 谷歌地图      更新时间：2023-09-26

我试图使谷歌地图调整大小，因为我调整我的浏览器，但似乎无论我尝试的大小保持不变。我也尝试改变高度和宽度与外部CSS当浏览器低于786px，但我没有得到任何东西。任何帮助:

我的代码

   <style>
    #map_canvas 
   {width:600px;
   height:400px;
   position: relative; 
   float: center;
 }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
    var map, marker;
    var lng = <?php echo json_encode($lng); ?>;
    var lat = <?php echo json_encode($lat); ?>;
    var desc= <?php echo json_encode($desc); ?>;
    var infowindow = new google.maps.InfoWindow();
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(xxxx, yyyy),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
         map = new google.maps.Map(map_canvas, map_options);
        for (i = 0; i < lng.length; i++) {
        AddLocations(lat[i], lng[i]);
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(desc[i]);
          infowindow.open(map, marker);
        }
      })(marker, i));
            }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
      google.maps.event.addDomListener(window, 'resize', function() {
     var center = map.getCenter();
     google.maps.event.trigger(map, "resize");
     map.setCenter(center); 
    });
        function addMarker(location) {
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
    }

    function AddLocations(lat, lng) {
           pos  = new google.maps.LatLng(lat,lng);
           addMarker(pos);
    }
    </script>

我用下面的代码显示

   <div id="map_canvas"  ></div>

您应该将map-canvas的宽度和高度值从fixed (px)更改为dynamic (%)，因为现在，即使窗口的尺寸发生了变化，您的div仍保持其固定大小。您还需要将html和body元素的宽度更改为100%。

相关文章：