javascript - 如何在模式中调整 API Google Map 的大小以避免灰屏

Question

首先对不起我的英语

我在模式中调整大小 API Google map 时遇到了一些问题，我已经检查了几篇文章，其中我们必须放置“google.maps.event.trigger({map}, 'resize');”避免灰屏

但对我来说这不起作用，我总是灰屏，所以我需要你的帮助

我想把我的代码放在 jsfiddle 上，但我犯了一些小错误，所以我把它放在这里

<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= "anonymous" > <!-- Optional theme --> 
    <link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity= "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin= "anonymous" > <!-- Latest compiled and minified JavaScript --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity= "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin= "anonymous" ></script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkWExAooGaEJGyNuOhaUb6Z-OGDxvgnxM&libraries=places&callback=initMap"
        async defer>
</script>

<style>

  .pac-container {
            z-index: 1051 !important;
        }

       #map {
            width:auto;
            height:480px;
            overflow:visible;
            display: block;
        }

       .modal-dialog {
            position: relative;
            width: auto;
            margin: 60px auto;
            max-width: 1000px;
            /*z-index: 1500;*/
        }


</style>









<!-- Modal j'achete je loue-->
   <div class="modal fade" id="myModalMap" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
     <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

              <h4 class="modal-title" id="myModalLabel">J'achete, je loue</h4>
          </div>
          <div class="modal-body">
              <div class="row">
                  <div class="col-md-12 col-xs-12">
                      <div class="well">
                          <div id="divTopRigth" class="text-right"></div>

                          <h1 id="TitleHistorique" class="text-center">Trouver un point de vente</h1>


    <div id="locationField">
      <input id="autocomplete"  class="form-control" placeholder="Entrer une rue" type="text" />
    </div>
  <br>
    <div id="map"></div>





                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>   

<button id="openmap">open map</button>

<script>
         $("#openmap").on('click',function(){


               ShowModalMap();


         });


     function ShowModalMap(){

    $('#myModalMap').appendTo("body").modal("show");

            //initMap();

}


        </script> 

          <script>


             //google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());


        </script>   

<script>


var placeSearch, autocomplete;
var src = 'http://149.202.171.217/cerp/V11/wp-content/themes/nouveau/FunctionAdd/test.kml';


function initMap() {

 var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 50.8503, lng: 4.3517},
    zoom:7
  });

    google.maps.event.trigger(map, 'resize');
var input = /** @type {!HTMLInputElement} */(document.getElementById('autocomplete'));
loadKmlLayer(src, map);

var options = {
  componentRestrictions: {country: "be"}
 };

  var autocomplete = new google.maps.places.Autocomplete(input,options);
  autocomplete.bindTo('bounds', map);


  autocomplete.addListener('place_changed', function() {

    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
        map.setZoom(14);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(16); 
    }

  });



  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      map.setCenter(pos);
      map.zoom(13);
    }, function() {

    });
  } else {

  }

          function loadKmlLayer(src, map) {
        var kmlLayer = new google.maps.KmlLayer(src, {


          map: map
        });
      }


}



        </script>

提前致谢

Answer 1

使用这个:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script>
        var placeSearch, autocomplete;
        var src = 'http://149.202.171.217/cerp/V11/wp-content/themes/nouveau/FunctionAdd/test.kml';
        $(document).ready(function () {
            $("#openmap").on('click', function () {
                ShowModalMap();
            });

            function ShowModalMap() {
                //alert(1);
                $('#myModalMap').appendTo("body");
                $('#myModalMap').modal("show");
                initMap();
            }
            $('#myModalMap').on('shown.bs.modal', function () {
                google.maps.event.trigger(map, "resize");
            });

        });
        function initMap() {

            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 50.8503, lng: 4.3517 },
                zoom: 7
            });
            loadKmlLayer(src, map);
            //var resize = new google.maps.event.trigger(map, 'resize');
            var input = (document.getElementById('autocomplete'));
            var options = {
                componentRestrictions: { country: "be" }
            };

            var autocomplete = new google.maps.places.Autocomplete(input, options);
            autocomplete.bindTo('bounds', map);


            autocomplete.addListener('place_changed', function () {

                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                }

                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                    map.setZoom(14);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(16);
                }

            });

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var infoWindow = new google.maps.InfoWindow({
                        content: '',
                        maxWidth: 400
                    });
                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    map.setCenter(pos);
                    map.setZoom(13);
                }, function () {

                });
            } else {

            }
        }
        function loadKmlLayer(src, map) {
            var kmlLayer = new google.maps.KmlLayer(src, {
                suppressInfoWindows: true,
                preserveViewport: false,
                map: map
            });
        }

        //setTimeout(function () {
        //    loadKmlLayer(src, map);
        //}, 10000);
        //}

        //google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());
    </script>
    <style>
        .pac-container {
            z-index: 1051 !important;
        }

        #map {
            width: auto;
            height: 480px;
            overflow: visible;
            display: block;
        }

        .modal-dialog {
            position: relative;
            width: auto;
            margin: 60px auto;
            max-width: 1000px;
            /*z-index: 1500;*/
        }
    </style>
</head>
<body>
    <!-- Modal j'achete je loue-->
    <div class="modal fade" id="myModalMap" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

                    <h4 class="modal-title" id="myModalLabel">J'achete, je loue</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 col-xs-12">
                            <div class="well">
                                <div id="divTopRigth" class="text-right"></div>

                                <h1 id="TitleHistorique" class="text-center">Trouver un point de vente</h1>


                                <div id="locationField">
                                    <input id="autocomplete" class="form-control" placeholder="Entrer une rue" type="text" />
                                </div>
                                <br>
                                <div id="map"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <button id="openmap">open map</button>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkWExAooGaEJGyNuOhaUb6Z-OGDxvgnxM&libraries=places&callback=initMap" async defer></script>
</body>

</html>