Question

我知道这已被问过很多，但我仍然无法解决这个问题。我有一个按钮，当用户点击它时，会出现一个引导模式，显示一个带谷歌地图的输入。但谷歌地图并没有出现，除非我调整窗口，然后就会出现。

这是我的模态按钮：

<!-- Bootstrap trigger to open modal -->
<a data-toggle="modal" href="#addLocation" data-target=".bs-example-modal-lg">
  <button class="btn btn-primary">Add Location</button>
</a>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addLocation" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Create Task</h4>
      </div>
      <div class="modal-body">

        <!-- The async form to send and replace the modals content with its response -->
        <form class="form" data-async data-target="#addLocation" action="" method="POST">
          {{ csrf_field() }}

          <div class="form-group {{ $errors->has('location') ? ' has-error' : '' }}">
            <label for="location">Create Location:</label>
            <input type="text" name="location" id="pac-input" class="form-control" placeholder="Create a location on the map"> @if($errors->has('location'))
            <span class="help-block">{{ $errors->first('location') }}</span> @endif
          </div>

          <div id="map" style="height: 500px; width: 100%"></div>

          <div class="form-group{{ $errors->has('lat') ? ' has-error' : '' }}">
            <label for="lat">Lat:</label>
            <input type="text" class="form-control input-sm" name="lat" id="lat" value="{{ old('lat') }}"> @if($errors->has('lat'))
            <span class="help-block">{{ $errors->first('lat') }}</span> @endif
          </div>
          <div class="form-group{{ $errors->has('lng') ? ' has-error' : '' }}">
            <label for="lng">Lng:</label>
            <input type="text" class="form-control input-sm" name="lng" id="lng" value="{{ old('lng') }}"> @if($errors->has('lng'))
            <span class="help-block">{{ $errors->first('lng') }}</span> @endif
          </div>

          <br />
          <button type="submit" class="btn btn-primary" id="create">Create</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

这是我的Google地图代码：

<script async defer src="https://maps.googleapis.com/maps/api/js?key={MY-KEY-IS-HERE}&libraries=places&callback=initAutocomplete"></script>

    <script>
        function initAutocomplete() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 34.173985,
                    lng: -83.107242
                },
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
                position: {
                    lat: 34.3630003,
                    lng: -84.332207
                },
                map: map,
                animation: google.maps.Animation.DROP,
                draggable: true
            });
            var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
            google.maps.event.addListener(searchBox, 'places_changed', function() {
                var places = searchBox.getPlaces();
                var bounds = new google.maps.LatLngBounds();
                var i, place;
                for (i = 0; place = places[i]; i++) {
                    bounds.extend(place.geometry.location);
                    marker.setPosition(place.geometry.location);
                }
                map.fitBounds(bounds);
                map.setZoom(14);
            });
            google.maps.event.addListener(marker, 'position_changed', function() {
                var lat = marker.getPosition().lat();
                var lng = marker.getPosition().lng();
                $('#lat').val(lat);
                $('#lng').val(lng);
            });
        } // I even added this, but still doesnt work

        $('#addLocation').on('shown', function() {
            google.maps.event.trigger(map, 'resize');
        })

    </script>

Answer 1

当模式对用户可见时，会触发此事件（将等待CSS转换完成）。如果是由点击引起的，那么 clicked元素可用作的relatedTarget属性事件

来自文档：Modal Events

应该是：

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

工作示例代码段。

＆＃13;

function initAutocomplete() {

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 34.173985,
      lng: -83.107242
    },
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
    position: {
      lat: 34.3630003,
      lng: -84.332207
    },
    map: map,
    animation: google.maps.Animation.DROP,
    draggable: true
  });

  var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));

  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();
    var bounds = new google.maps.LatLngBounds();
    var i, place;

    for (i = 0; place = places[i]; i++) {
      bounds.extend(place.geometry.location);
      marker.setPosition(place.geometry.location);
    }

    map.fitBounds(bounds);
    map.setZoom(14);

  });

  google.maps.event.addListener(marker, 'position_changed', function() {
    var lat = marker.getPosition().lat();
    var lng = marker.getPosition().lng();

    $('#lat').val(lat);
    $('#lng').val(lng);
  });

}


$("#addLocation").on("shown.bs.modal", function() {
  google.maps.event.trigger(map, "resize");
});

google.maps.event.addDomListener(window, 'load', initAutocomplete);

＆＃13;

#map {
  height: 500px;
  width: 100%;
}
.pac-container {
  z-index: 2000;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<a data-toggle="modal" href="#addLocation" data-target=".bs-example-modal-lg">
  <button class="btn btn-primary">Add Location</button>
</a>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addLocation" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Create Task</h4>
      </div>
      <div class="modal-body">

        <!-- The async form to send and replace the modals content with its response -->
        <form class="form" data-async data-target="#addLocation" action="" method="POST">

          <div class="form-group">
            <label for="pac-input">Create Location:</label>
            <input type="text" name="location" id="pac-input" class="form-control" placeholder="Create a location on the map">
            <span class="help-block"></span>
          </div>

          <div id="map"></div>

          <div class="form-group">
            <label for="lat">Lat:</label>
            <input type="text" class="form-control input-sm" name="lat" id="lat" value="">
            <span class="help-block"></span>
            <div class="form-group">
              <label for="lng">Lng:</label>
              <input type="text" class="form-control input-sm" name="lng" id="lng" value="">
              <span class="help-block"></span>
            </div>

            <br />
            <button type="submit" class="btn btn-primary" id="create">Create</button>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places"></script>

＆＃13;

谷歌地图不会出现在Bootstrap Modal中

1 个答案: