javascript - Google Map 未显示，而 map 是所有元素的控制台(在 Bootstrap 模式上)

Question

本地图控制所有元素(在 Bootstrap 模态上)/时，Javascript 谷歌地图不显示。

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

但是当我尝试控制 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>

Answer 1

像这样在模型加载后调用加载方法

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