首页 文章

在使用Twitter Bootstrap创建的模式中显示Google Map

提问于
浏览 次
58

我正在尝试使用Twitter Bootstrap将Google Map 插入模式 . 模态显示当前 Map 的形状，但仅显示 Map 的一部分，其余为灰色 . 调整屏幕大小后， Map 始终显示正确，但位于错误的位置 .

我搜索并找到了一些建议，例如调用 Map 的resize事件，或者将 Map 图像的max-width设置为none，但这些建议都没有帮助到目前为止 . 似乎 Map 无法确定它的正确大小，只要它隐藏在一个元素中即可 .

JS

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"),
    mapOptions);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.219987, 4.396237)
  });
  marker.setMap(map);
}

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <div id="mapCanvas" style="width: 500px; height: 400px"></div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

我正在使用Twitter Bootstrap v2.0.4 . 我需要一些帮助，因为我没有正确触发调整大小事件或编辑css，因此谷歌 Map 是独立的 .

google-maps twitter-bootstrap modal-dialog

11 回答

  • 3

    接受的答案摆脱了灰色方框，但并没有将 Map 置于正确的坐标中心 . 我的解决方案是等待渲染 Map ，直到模态完成显示 .

    $('#modal').on('shown', function () {
    initialize();
});
    回复于
  • 4

    以下代码适用于bootstrap 3

    $("#mapModal").on("shown.bs.modal", function () {initialize();});
    回复于
  • 108
    this works for me 
    **<!-- 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">Google Maps</h4>
                </div>
                <div class="modal-body">

                    <div id="map_canvas" style="width:auto; height: 500px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


**Button**
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Map</button>

**javascript**
<script type="text/javascript">
    function initializeMap() {
        var mapOptions = {
            center: new google.maps.LatLng(51.219987, 4.396237),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(51.219987, 4.396237)
        });
        marker.setMap(map);
    }

    //show map on modal
    $('#myModal').on('shown.bs.modal', function () {
        initializeMap();
    });

</script>

    希望这会有所帮助

    回复于
  • 5

    我已修复解决方案：

    $('#myId').on('shown.bs.modal', function () { 
    initializeMap() // with initializeMap function get map.
});

    //事件 shown.bs.modal on modal bootstrap将在模态显示后显示，而不是使用 show.bs.modal 因为它将在模态显示之前调用 .

    回复于
  • 38

    谷歌 Map 确实显示放置在动态元素内的"Grey"区域's when it'（例如：一个调整大小，淡化等） . 你是否正确触发"resize"函数，该函数应在动画完成后调用（Bootstrap 3中的 shown.bs.modal 事件或Bootstrap 2中的 shown event）：

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

    在Bootstrap 2中，您将执行以下操作：

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

    （其中 map 是 Map 的变量名称（有关详细信息，请参阅Google Maps documentation）， #myModal 是元素中的ID） .

    UPDATE 2018-05-22

    使用Maps JavaScript API版本3.32中的新渲染器版本，resize事件不再是 Map 类的一部分 .

    文件说明

    调整 Map 大小后， Map 中心将固定全屏控制现在保留中心 . 不再需要手动触发resize事件 .

    来源：https://developers.google.com/maps/documentation/javascript/new-renderer

    google.maps.event.trigger(map, "resize"); 从版本3.32开始没有任何影响

    回复于
  • 5

    对我来说，它就像这样（Boostrap 3）：

    $("#contact-modal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
});
    回复于
  • 1

    正确显示 Map 并居中

    我想根据原始答案指出我做的一些修改，使其与Bootstrap 3一起使用（检查modals usage） .

    // Resize map to show on a Bootstrap's modal
$('#map-modal').on('shown.bs.modal', function() {
  var currentCenter = map.getCenter();  // Get current center before resizing
  google.maps.event.trigger(map, "resize");
  map.setCenter(currentCenter); // Re-set previous center
});

    在这种情况下，我还会根据Jan-Henk对第一个答案的评论中提出的this question来重新定位 Map .

    回复于
  • 8

    使用Bootstrap 3时，您需要使用其文档中提供的内容，即代替“显示”使用'shown.bs.modal'

    例：

    $('#modal').on('shown.bs.modal', function () { 
     initialiseMap();
 });
    回复于
  • 1

    事实上，接受的答案确实适用于div的内容是本地的情况 . 不幸的是，我遇到了同样的问题，显示了一个包含在远程数据中的 Map . 获取 Map 的句柄并调用resize并没有正确地将我的 Map 居中 . 以下是我在远程数据情况下修复问题的方法 .

    包含脚本标记作为远程数据的一部分，其中包含初始化 Map 的功能

    <script type="text/javascript">
    function renderMap() {
        var point = new google.maps.LatLng(51.219987, 4.396237);
        var map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 13,
            center: point
        });
        var marker = new google.maps.Marker({ position: point, map: map, icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png' });
    }
</script>

    在主页面上显示的对话框中调用该功能

    <script type="text/javascript">

    $(document).ready(function () {
        $('#dlgReportInfo').on('shown', function () {
            renderMap();
        });
    })
</script>

    这样，在初始化之前， Map 已在对话框中调整大小 . 希望这可以帮助其他类似情况的人 .

    回复于
  • 5

    试试这个 ！

    <div class="modal fade" id="map_modal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body"><div id="map_canvas" style="width:530px; height:300px"></div></div>

    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

    var map = marker = new Array();
geocoder = NULL;


                    function addPoint(location, id, mapId) {
                        if (!marker[id]) {
                            marker[id] = new google.maps.Marker({
                                position: location,
                                map: map[mapId],
                                draggable: true
                            });
                        }

                    }


                    function placeMarker(location, editStr, id) {
                        if (!marker[id]) {
                            marker[id] = new google.maps.Marker({
                                position: location,
                                map: map[id],
                                draggable: false
                            });
                        }
                        marker[id].setPosition(location);
                        map[id].setCenter(location);
                        $("#longitud").val(location.lat());
                        $("#latitud").val(location.lng());


                    }


                    function  initializeMap(id, div_id, lat, lng, editStr) {
                        if (!geocoder)
                            geocoder = new google.maps.Geocoder();

                        if (!map[id]) {
                            var coordinates = new google.maps.LatLng(lat, lng);
                            var myOptions = {zoom: 8, center: coordinates, mapTypeId: google.maps.MapTypeId.ROADMAP}
                            map[id] = new google.maps.Map(document.getElementById(div_id), myOptions);
                            google.maps.event.addListener(map[id], 'click', function(event) {
                                placeMarker(event.latLng, editStr, id);
                            });

                            placeMarker(coordinates, editStr, id);

                        }
                    }


                    $('#map_modal').on('shown.bs.modal', function(e) {
                        initializeMap("#newMaps", "map_canvas", 10.444598, -66.9287, "");
                    })
    回复于
  • 43

    我也面临同样的问题，但我通过等待 Map 的“空闲”状态（即它完成时）然后调用resize来解决它：

    google.maps.event.addListenerOnce(map, 'idle', function () {
                 var currentCenter = map.getCenter();
                 google.maps.event.trigger(map, 'resize');
                 map.setCenter(currentCenter);

                 map.setZoom(15);
             });

    后

    map = new google.maps.Map(document.getElementById('map-canvas2'),mapOptions);
    回复于

相关问题