javascript - 在 Bootstrap 模式上显示谷歌地图

Question

我的 bootstrap3 模式:

<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">
        <div id="map-canvas" style="width:530px; height:300px;"></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>
  </div>
</div>

我的 JavaScript:

    <script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>
<script type="text/javascript">



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

        var lat = 10.444598;
        var lon = -66.9287;

        function init() {
            var mapDiv = document.getElementById('map-canvas');
            var map = new google.maps.Map(mapDiv, {
                center: new google.maps.LatLng(lat, lon),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lon),
                map: map,
                title: 'Hello World!'
            });
        }



    }

</script>

我在 stackoverflow 上阅读了一些关于此问题的线程，但我尝试将解决方案实现到我的代码中。然而我的模态仍然是空白的。我做错了什么？

Answer 1

如果您将 Google map 添加到 ModalWindow，您可能会遇到如下所述的不同问题:

1. ModalWindow / Google Maps

我试图避免这些加载问题:

 <div id="mapCanvas" class="map_popup"></div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h2 class="fontface" id="myModalLabel">Header</h2> 
</div> 

<div class="modal-body">
    <div class="load_map">
</div>

• 在开始时加载 map (#mapCanvas)

• 将其附加到 ModalWindow (.load_map)

  //JS Part
  var popupmap = (function() {
  
  var map_popup, marker_popup, geocoder, latLng;
  
  //init the code for the popup
  var init = function() {
  
      geocoder = new google.maps.Geocoder();
  
      latLng = new google.maps.LatLng(52.524744168143755, 13.417694102972746);
  
      map_popup = new google.maps.Map(document.getElementById('mapCanvas'), {
          zoom: 10,
          center: latLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          streetViewControl: false,
          panControl:false,
          zoomControl: false 
      });
  
  
      google.maps.event.addListenerOnce(map_popup, 'idle', function(){
         $('.load_map').append($('#mapCanvas'));
      });
  
  
  };
  

希望这有帮助。