谷歌地图没有显示，而地图是控制台所有元素（在引导模式上）答案

【问题标题】：Google Map is not showing while map is console all the elements (on the Bootstrap modal)谷歌地图没有显示，而地图是控制台所有元素（在引导模式上）
【发布时间】：2019-08-07 23:57:05
【问题描述】：

当地图控制所有元素时，Javascript Google Map 未显示（在引导模式上）/。

我想在模式中的点击按钮上显示谷歌地图，但地图没有显示。

但是当我试图控制地图时。它工作正常。

console.log(map);

控制台结果是这样的：

Object { gm_bindings_: {…}, __gm: {…}, gm_accessors_: {…}, center: {…}, zoom: 9, zoomControl: true, mapTypeId: "roadmap", j: undefined, mapTypes: {}, features: {}, … }

那么我的代码有什么问题。

模态文件是：

<div id="map" style="height: 420px;">

  <script>
  jQuery(document).ready(function ()
  { 

    load();

    });

  function load()
        {
            var mapOptions = {
                center: new google.maps.LatLng(30.722956,76.76942),
                zoom: 9,
                zoomControl: true                  
            };
            map = new google.maps.Map(document.getElementById("map"), mapOptions);
            poly = new google.maps.Polyline({
                strokeColor: '#000000',
                strokeOpacity: 1.0,
                strokeWeight: 3
            });
            poly.setMap(map);
            console.log(map);

            }

    </script>

【问题讨论】：

如果地图在 Bootstrap 模式中，您需要在显示模式时初始化它，而不是在页面加载时。这是因为在此之前内容是不可见的

标签： javascript jquery html bootstrap-4

【解决方案1】：

在模型加载后调用加载方法

$('#myModal').on('show.bs.modal', function () {
  load();
})

【讨论】：

【解决方案2】：

几个假设： 1. 你已经实现了所有必要的 Bootstrap CSS/HTML/JS 来使模式工作 2.你的模态有一个ID 3. 你已经实现了所有必要的 Google Maps JS 以使地图 API 工作

如果上述情况属实，则必须在模态显示时调用load()方法，而不是在页面加载时调用，因为此时内容还不能渲染。

所以你需要做的是：

function load() {
  var mapOptions = {
    center: new google.maps.LatLng(30.722956, 76.76942),
    zoom: 9,
    zoomControl: true
  };
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);
  console.log(map);
}

// #myModal is the ID of the modal div in your HTML
$('#myModal').on('shown.bs.modal', function() {
  load();
})

【讨论】：

【解决方案3】：

我已经运行了添加 jquery 和 google API 的代码，没有任何困难。但是有一些警告。

jQuery(document).ready(function() {

  load();

});

function load() {
  var mapOptions = {
    center: new google.maps.LatLng(30.722956, 76.76942),
    zoom: 9,
    zoomControl: true
  };
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);
  console.log(map);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<div id="map" style="height: 420px;">

【讨论】：