Question

https://docs.google.com/drawings/d/1iHUJoyHKV-r7tjUqmHy5mY3cHtK1ULyxPtElN2GLNFA/edit?usp=sharing

我的模态上的地图没有完美显示。我已在链接上搜索解决方案：Showing a Google Map in a modal created with Twitter Bootstrap 但我无法实现它，因为我是谷歌地图上的新手。

我的模态html：

    <div id="locateModal" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="blue bigger">Please fill the following form fields</h4>
                </div>

                <div class="modal-body overflow-visible">
                </div>
            </div>
        </div>
    </div>

我的javascript：

        var myLatlng;
        var map;
        function initialize() {
            myLatlng = new google.maps.LatLng(-6.905270, 107.645368);
            var mapOptions = {
                zoom: 4,
                center: myLatlng
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Hello World!'
            });
        }
        $('.modal').on('shown', function () {
              google.maps.event.trigger(map, 'resize');
        });
        google.maps.event.addDomListener(window, 'load', initialize);

请帮帮我......

Answer 1

你的html页面中没有名为mapCanvas的div。尝试在模态体中添加mapCanvas div，如下所示。这可能是地图未完美显示的原因。请检查并告诉我它是否有效。

<div id="locateModal" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="blue bigger">Please fill the following form fields</h4>
            </div>

            <div class="modal-body overflow-visible">
               <div id="mapCanvas"></div>
            </div>
        </div>
    </div>
</div>

Answer 2

感谢Joyson完成了html。但我对地图的目的没有100％显示在带有bootstrap v3的模态对话框上。我已经用这个javascript自己解决了这个问题：

        var map;        
        var myCenter=new google.maps.LatLng(53, -1.33);
        var marker=new google.maps.Marker({
            position:myCenter
        });

        function initialize() {
          var mapProp = {
              center:myCenter,
              zoom: 14,
              draggable: false,
              scrollwheel: false,
              mapTypeId:google.maps.MapTypeId.ROADMAP
          };

          map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
          marker.setMap(map);

          google.maps.event.addListener(marker, 'click', function() {

            infowindow.setContent(contentString);
            infowindow.open(map, marker);

          }); 
        };
        google.maps.event.addDomListener(window, 'load', initialize);

        google.maps.event.addDomListener(window, "resize", resizingMap());

        $('#locateModal').on('show.bs.modal', function() {
           //Must wait until the render of the modal appear, thats why we use the resizeMap and NOT resizingMap!! ;-)
           resizeMap();
        })

        function resizeMap() {
           if(typeof map =="undefined") return;
           setTimeout( function(){resizingMap();} , 400);
        }

        function resizingMap() {
           if(typeof map =="undefined") return;
           var center = map.getCenter();
           google.maps.event.trigger(map, "resize");
           map.setCenter(center); 
        }

感谢您的帮助：）

地图在我的引导模态上不显示100％

2 个答案: