个人中心
gpt4 book ai didi

javascript - Google map 内容未显示在 Bootstrap 模式第 2 部分中

转载 作者：行者123 更新时间：2023-11-28 05:03:21 24 4
gpt4 key购买 nike

您好，Stackoverflow 程序员，我创建了另一个带有表单输入的谷歌地图，该 map 收集用户地址并将其填充在 map 上。我已遵循以下链接中创建的更正 Google map content not showing inside Bootstrap modal view

但我仍然无法让 map 显示在模态视图中。如果在正常页面上运行就可以了。 有人可以帮我吗？

谢谢

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="http://maps.google.com/maps/api/js?libraries=places&region=ng&language=en&sensor=true&key=AIzaSyAlb3bRgk_Jq3mBzgpVyLTeeKL-RKaSkx4"></script>

</head>
<body>

<div class="container">
  <h2>Google Map</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open MAP</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">

    <br> Address:


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

  <div id="test" style="height: 300px;width: 100%;margin: 0.6em;"></div>
  <!-- MAP -->
  <script type="text/javascript">
    $(function getMap() {
      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('test'), 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>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

最佳答案

如果 map 初始化时 map Canvas 不可见，则可能无法加载图 block 。但是您可以通过使用调整大小来触发图 block 加载。由于您正在使用，因此需要首先存储对 map 对象的引用。

map = new google.maps.Map(document.getElementById('test'), mapOptions),
tmp = map;

当您的模态显示时，在 map 上调用调整大小事件

$('#myModal').on('shown.bs.modal', function () {
google.maps.event.trigger(tmp, 'resize')
})

关于javascript - Google map 内容未显示在 Bootstrap 模式第 2 部分中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41968102/

24 4 0
文章推荐： c++ - 通过完美转发将可变参数模板参数作为对 std::thread 的引用传递
文章推荐： css - CSS 的图像缩小问题
文章推荐： javascript - React js - Laravel 5 : Using csrf-token in POST method
文章推荐： javascript - 如何将CSS元素添加到倒计时
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com