1

我正在尝试通过单击从隐藏的 div 中拉出地图的链接，将谷歌地图显示到颜色框弹出窗口中。我正在使用颜色框http://www.jacklmoore.com/colorbox/example1/inner html的概念将地图从隐藏的 div 加载到它的窗口中。<div id="map_canvas"></div>

整个代码块如下

<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=xyxyxyxyxyxyxyxyxyxyxyxyxyx&sensor=false"></script>


    <script type="text/javascript" language="javascript">
function initialize() 
{
    var cenLatlng = new google.maps.LatLng(/////////,///////////);
    var myOptions = {
                       zoom: 15,
                       center: cenLatlng,
                       mapTypeId: google.maps.MapTypeId.ROADMAP
                    }

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

    var myLatlng = new google.maps.LatLng(/////////,////////////);
    var marker = new google.maps.Marker({
                                          position: myLatlng,
                                          map: map,
                                          title:"XXXXXXXXXXX"
                                       });

    var contentString =  '<div class="info"><img style="float:left;padding-right:10px;" src="/dummy.jpg"><b>YYYYYYYY</b> <br/>' +

             'ZZZZZZZZZZ <br />' +

             'AAAAAAAAA <br />' + 

             'Telephone: BBBBBBBBB</div>';

    var infowindow = new google.maps.InfoWindow({
                                                  content: contentString,
                                                  width:150,
                                                  height:90
                                               });

    infowindow.open(map,marker);

    // Start of newly added code block
    google.maps.event.addListener(marker, 'click', function() {
                                    infowindow.open(map,marker);
                                         });
    // End of newly added code block
}
    google.maps.event.addDomListener(window, 'load', initialize);
</script>


    <script>
            $(document).ready(function(){
            $(".inline").colorbox({
                                  inline:true,  
                                  scroll:false


                                  });

        });
    </script>

 <div id="map_canvas" style=width:700px; height:500px; display:none;></div>

<p><a class='inline' href="#map_canvas">Display map in colorbox</a></p>

问题是从隐藏的 div 加载地图时根本不显示地图。另一方面，当 divmap_canvas未隐藏时，地图会完美地加载到隐藏的 div 和颜色框窗口中。

我将不得不为我的应用程序使用所有代码块，但应该从隐藏的 div 正确加载地图。

任何想法？

顺便说一句，我正在使用 google api v-3

4

2 回答 2

1

使用内联内容时，您不希望href隐藏目标内容（引用的元素）。相反，将内容（未隐藏）包含在另一个隐藏的 div 中，如下所示：

<div style="display:none">
    <div id="map_canvas" style="width:700px; height:500px"></div>
</div>
于 2012-09-19T00:13:20.533 回答
0

也许您需要在颜色框的 onComplete 上初始化您的地图。

    $(".inline").colorbox({
                          inline:true,  
                          scroll:false
                          onComplete: function(){
                              initialize();
                          }

                          });

并删除脚本中的这一行：

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

但是每次打开颜色框时都会重新加载您的地图

于 2012-09-17T17:41:45.340 回答