谷歌地图里面的Bootstrap模态不起作用

Question

我正在尝试在bootstrap模式中添加谷歌地图，但它不适合我。当我点击链接时，它会打开模态窗口，但地图显示不正常，没有模态，它工作正常，但我不知道，现在发生了什么。

      <script type="text/javascript">
        $(document).on("click", ".open-AddBookDialog", function () {
          var myBookId = $(this).data('id');
          $(".modal-body #bookId").val(myBookId);
      });
      </script>

      <!-- MAP -->
        <script type="text/javascript">
         $(function () {
           var lat = 13.034118,
               lng = 77.5679959;
               latlng = new google.maps.LatLng(lat, lng),
               image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';

           //zoomControl: true,
           //zoomControlOptions: google.maps.ZoomControlStyle.LARGE,

           var mapOptions = {
               center: new google.maps.LatLng(lat, lng),
               zoom: 13,
               mapTypeId: google.maps.MapTypeId.ROADMAP,
               panControl: true,
               panControlOptions: {
                   position: google.maps.ControlPosition.TOP_RIGHT
               },
               zoomControl: true,
               zoomControlOptions: {
                   style: google.maps.ZoomControlStyle.LARGE,
                   position: google.maps.ControlPosition.TOP_left
               }
           },
           map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
               marker = new google.maps.Marker({
                   position: latlng,
                   map: map,
                   icon: image
               });

           var input = document.getElementById('searchTextField');
           var autocomplete = new google.maps.places.Autocomplete(input, {
               types: ["geocode"]
           });

           autocomplete.bindTo('bounds', map);
           var infowindow = new google.maps.InfoWindow();

           google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
               infowindow.close();
               var place = autocomplete.getPlace();
               if (place.geometry.viewport) {
                   map.fitBounds(place.geometry.viewport);
               } else {
                   map.setCenter(place.geometry.location);
                   map.setZoom(17);
               }

               moveMarker(place.name, place.geometry.location);
               $('.MapLat').val(place.geometry.location.lat());
               $('.MapLon').val(place.geometry.location.lng());
           });
           google.maps.event.addListener(map, 'click', function (event) {
               $('.MapLat').val(event.latLng.lat());
               $('.MapLon').val(event.latLng.lng());
               infowindow.close();
                       var geocoder = new google.maps.Geocoder();
                       geocoder.geocode({
                           "latLng":event.latLng
                       }, function (results, status) {
                           console.log(results, status);
                           if (status == google.maps.GeocoderStatus.OK) {
                               console.log(results);
                               var lat = results[0].geometry.location.lat(),
                                   lng = results[0].geometry.location.lng(),
                                   placeName = results[0].address_components[0].long_name,
                                   latlng = new google.maps.LatLng(lat, lng);

                               moveMarker(placeName, latlng);
                               $("#searchTextField").val(results[0].formatted_address);
                           }
                       });
           });

           function moveMarker(placeName, latlng) {
               marker.setIcon(image);
               marker.setPosition(latlng);
               infowindow.setContent(placeName);
               //infowindow.open(map, marker);
           }
       });
</script>

<style type="text/css">
  @import url('http://getbootstrap.com/dist/css/bootstrap.css');
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog" data-toggle="modal" data-target="#myModal">Click</a><br>


Address:<input id="searchTextField" type="text" size="50" style="">
<br>
  

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <!-- <img width="241" height="72" style="top: 0px; width: 241px; height: 72px;" src="img/logos/logo.png" data-sticky-top="41" data-sticky-height="36" data-sticky-width="135" alt="srisankaramatrimony-franchisee"> -->
        <div id="map_canvas" style="height: 300px;width: 100%;margin: 0.6em;"></div> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

Google地图显示＆＃34;格雷＆＃34;区域放置在动态元素内部时（例如：调整大小，渐变等的区域）。触发＆＃34;调整大小＆＃34;函数，应该在动画完成后调用（shown event）应该做的伎俩：

$("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
    map.setCenter(latlng);
});

＆＃13;

＆＃13;

      <script type="text/javascript">
        $(document).on("click", ".open-AddBookDialog", function () {
          var myBookId = $(this).data('id');
          $(".modal-body #bookId").val(myBookId);
      });
      </script>

      <!-- MAP -->
        <script type="text/javascript">
         $(function () {
           var lat = 13.034118,
               lng = 77.5679959;
               latlng = new google.maps.LatLng(lat, lng),
               image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';

           //zoomControl: true,
           //zoomControlOptions: google.maps.ZoomControlStyle.LARGE,

           var mapOptions = {
               center: new google.maps.LatLng(lat, lng),
               zoom: 13,
               mapTypeId: google.maps.MapTypeId.ROADMAP,
               panControl: true,
               panControlOptions: {
                   position: google.maps.ControlPosition.TOP_RIGHT
               },
               zoomControl: true,
               zoomControlOptions: {
                   style: google.maps.ZoomControlStyle.LARGE,
                   position: google.maps.ControlPosition.TOP_left
               }
           },
           map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
               marker = new google.maps.Marker({
                   position: latlng,
                   map: map,
                   icon: image
               });

           var input = document.getElementById('searchTextField');
           var autocomplete = new google.maps.places.Autocomplete(input, {
               types: ["geocode"]
           });

           autocomplete.bindTo('bounds', map);
           var infowindow = new google.maps.InfoWindow();

           google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
               infowindow.close();
               var place = autocomplete.getPlace();
               if (place.geometry.viewport) {
                   map.fitBounds(place.geometry.viewport);
               } else {
                   map.setCenter(place.geometry.location);
                   map.setZoom(17);
               }

               moveMarker(place.name, place.geometry.location);
               $('.MapLat').val(place.geometry.location.lat());
               $('.MapLon').val(place.geometry.location.lng());
           });
           google.maps.event.addListener(map, 'click', function (event) {
               $('.MapLat').val(event.latLng.lat());
               $('.MapLon').val(event.latLng.lng());
               infowindow.close();
                       var geocoder = new google.maps.Geocoder();
                       geocoder.geocode({
                           "latLng":event.latLng
                       }, function (results, status) {
                           console.log(results, status);
                           if (status == google.maps.GeocoderStatus.OK) {
                               console.log(results);
                               var lat = results[0].geometry.location.lat(),
                                   lng = results[0].geometry.location.lng(),
                                   placeName = results[0].address_components[0].long_name,
                                   latlng = new google.maps.LatLng(lat, lng);

                               moveMarker(placeName, latlng);
                               $("#searchTextField").val(results[0].formatted_address);
                           }
                       });
           });

           function moveMarker(placeName, latlng) {
               marker.setIcon(image);
               marker.setPosition(latlng);
               infowindow.setContent(placeName);
               //infowindow.open(map, marker);
           }
           
       
           $("#myModal").on("shown.bs.modal", function () {
               google.maps.event.trigger(map, "resize");
               map.setCenter(latlng);
           });
       });
</script>

＆＃13;

<style type="text/css">
  @import url('http://getbootstrap.com/dist/css/bootstrap.css');
</style>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog" data-toggle="modal" data-target="#myModal">Click</a><br>


Address:<input id="searchTextField" type="text" size="50" style="">
<br>
  

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <!-- <img width="241" height="72" style="top: 0px; width: 241px; height: 72px;" src="img/logos/logo.png" data-sticky-top="41" data-sticky-height="36" data-sticky-width="135" alt="srisankaramatrimony-franchisee"> -->
        <div id="map_canvas" style="height: 300px;width: 100%;margin: 0.6em;"></div> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

在这里工作：http://plnkr.co/edit/J10GYavKTPwVgspAfntH?p=preview

$(document).on("click", ".open-AddBookDialog", function() {
  $('#map_canvas').html($('#test').clone());
  var myBookId = $(this).data('id');
  $(".modal-body #bookId").val(myBookId);
});

我拿了另一个div，在页面加载时加载了地图，然后在锚点击时将其克隆到模态体map_canvas div。