在twitter引导模式下动态加载谷歌地图 [英] Load google map dynamicly in twitter bootstrap modal

查看：104
本文介绍了在twitter引导模式下动态加载谷歌地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 <$ c $我试图在twitter引导程序的模式窗口内动态添加地图，但似乎无法正常工作。 c><！DOCTYPE html> 
< html lang =en> 
< head> 
< link href =// netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css =stylesheet> 
< style type =text / css> 
＃map-canvas {
 margin：0; 
 padding：0; 
身高：100％; 
} 
 
＃map-canvas {
 width：100％; 
 height：400px; 
} 
< / style> 
< / head> 
 
< body> 
 
< h1 class => Lazy Load Google Map< / h1> 
< a href =javascript :; class =viewdata-lat =23，18.33>启动映射模式< / a> 
 
< div class =modal fadeid =myMapModal> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header>

请帮我解决。

解决方案打开模式Via数据属性

 < a href =＃data-lat = 23，18.33data-toggle =modaldata-target =＃myMapModal> 
启动映射模式
< / a>

使用参数（参数）创建函数初始化

 < script type ='text / javascript'> 
 var element = $（this）; 
 var map; 
 
函数初始化（myCenter）{
 var marker = new google.maps.Marker（{
 position：myCenter 
}）; 
 
 var mapProp = {
 center：myCenter，
 zoom：10，
 // draggable：false，
 // scrollwheel：false，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 map = new google.maps.Map（document.getElementById（map-canvas），mapProp）; 
 marker.setMap（map）; 
}; 
< / script>在shown.bs.modal事件中使用调用者按钮获取的参数调用它（$（e .relatedTarget））
 < script type ='text / javascript'> $（'＃myMapModal'）。on（'shown.bs.modal'，function（e）{
 var element = $（e.relatedTarget）; 
 var data = element.data（lat）。split（'，'）
 initialize（new google.maps.LatLng（data [0]，data [1]））; 
}）; 
 
< / script> 
  
 
I'm Trying to add a map dynamically inside a modal window of a twitter bootstrap but it dose not seem to work.
<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
  #map-canvas  {
  margin: 0;
  padding: 0;
  height: 100%;
}

#map-canvas {
  width:100%;
  height:400px;
}
        </style>
    </head>

    <body  >

        <h1 class="">Lazy Load Google Map</h1> 
<a href="javascript:;" class="view" data-lat="23, 18.33">Launch Map Modal</a>

<div class="modal fade" id="myMapModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div id="map-canvas" class=""></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

        <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



        <script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>





        <script type='text/javascript'>

        $(".view").click(function(){
            var element = $(this);

        var map;        
            var myCenter=new google.maps.LatLng(element.attr("data-lat"));
var marker=new google.maps.Marker({
    position:myCenter
});
$('#myMapModal').modal('show');

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());
$('#myMapModal').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); 
}

            });



        </script>


    </body>
</html>

Please help me out.
 解决方案 
Open modal Via data attributes
<a href="#" data-lat="23, 18.33" data-toggle="modal" data-target="#myMapModal">
   Launch Map Modal
</a>

create function initialize with parameter(parameters)
<script type='text/javascript'>
    var element = $(this);
    var map;

    function initialize(myCenter) {
        var marker = new google.maps.Marker({
            position: myCenter
        });

      var mapProp = {
            center: myCenter,
            zoom: 10,
            //draggable: false,
            //scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
        marker.setMap(map);
    };
</script>

on shown.bs.modal event call it with parameter that you get from invoker button ($(e.relatedTarget))
<script type='text/javascript'>

    $('#myMapModal').on('shown.bs.modal', function(e) {
        var element = $(e.relatedTarget);
        var data = element.data("lat").split(',')
        initialize(new google.maps.LatLng(data[0], data[1]));
    });

</script>



                        
这篇关于在twitter引导模式下动态加载谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆