Question

在bootstrap模式弹出窗口中没有显示地图。

模态弹出窗口出现空白页面，如何在其中显示地图。我添加了所有脚本文件和css文件。救救我！

HTML

<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: 400px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
// button 
<td><a href="#" onclick="loadMap('@callinfo.latitude','@callinfo.longitude')" data-toggle="modal" data-target="#myModal"><i class="fa fa-map-marker"></i></a></td>

JS

<script>
    function loadMap(lat, lon) {
      var mapOptions = {
        center: new google.maps.LatLng(lat, lon),
        zoom: 15,
        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(lat, lon)
    });
    marker.setMap(map);
    }

    //show map on modal
$('#myModal').on('shown.bs.modal', function (lat, lon) {     
    loadMap(lat, lon);
});
</script>

Answer 1

首先从a元素中删除loadMap attr。

shown.bs.modal方法只能运行一次，这将在lat事件中完成。

但是此事件功能不会使lon＆amp; lat作为参数。

添加lon＆amp; map_canvas作为某个元素的数据属性，例如<div id="map_canvas" data-lat="@callinfo.latitude" data-lon="@callinfo.longitude" style="width:auto; height: 400px;"></div> div：

shown.bs.modal

然后在$('#myModal').on('shown.bs.modal', function () { loadMap($("#map_canvas").attr("data-lat"), $("#map_canvas").attr("data-lon")); });事件中检索这些值，如下所示：

using P = point_data_type;
P point(int x, int y){
   return DataIn[x + y * width];  // N - ...?
}

Google地图未显示在引导程序模式弹出窗口中

1 个答案: