如何在锚点点击上使用 jQuery 加载谷歌地图答案

【问题标题】：How to load google map using jQuery on the anchor click如何在锚点点击上使用 jQuery 加载谷歌地图
【发布时间】：2011-10-13 13:49:50
【问题描述】：

我正在尝试在锚点点击时加载谷歌地图。以下是详细信息。

我有 index.aspx 页面，其中有一个锚标记和一个 div "divLoadMap"

<a class="loadMap" href="map.aspx">Load Map</a>
<div id="divLoadMap">
</div>

我有 map.aspx，其中包含地图详细信息。下面是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="_LANGUAGE" xml:lang="_LANGUAGE">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simple Jquery CSS Tabs and V3 Google Maps</title>

     <script type="text/javascript" src="/common/js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript" language="javascript">

    $(document).ready(function() {

      function initialize() 
        {     
            var latlng = new google.maps.LatLng(25.294371, 55.332642);     
            var myOptions = {       zoom: 8,       center: latlng,       mapTypeId: google.maps.MapTypeId.ROADMAP     };     
            var map = new google.maps.Map(document.getElementById("map_canvas"),         myOptions);


            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'Dubai'
            });
            var contentString = 'Dubai';

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 50
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });

        }  

     initialize(); 

    });

    </script>

</head>
<body>
   <form id="mapform" >
   <div id="map_canvas" style="width: 500px; height: 500px">
   </div>
   </form> 
</body>
</html>

现在我想通过单击 index.aspx 上的锚标记来加载此地图。

请推荐！！如果能获得上述问题的代码示例，将不胜感激。

【问题讨论】：

您的问题不清楚 - 如果您单击锚点，您将被带到 map.aspx，该文件将加载到地图中。你能说得更具体点吗？
在锚点上，它将在覆盖窗口中打开 map.aspx，即在同一页面上打开灯箱。

标签： jquery html google-maps google-maps-api-3

【解决方案1】：

您可能想尝试一个处理 iframe 的灯箱插件。 Pirobox 就是一个例子。

这个插件使用 rel 属性来设置灯箱选项。在您的情况下，您将使用 iframe-width-height 参数。您的代码将如下所示：

//using 'full' for width and height will make the lightbox fullscreen 
//or you can specify a width and height in pixels.
<a href="map.aspx" rel="iframe-full-full" class="pirobox_gall1" >Load Map</a>

【讨论】：

【解决方案2】：

我想到了下面的方法。

声明一个 id = 'GoogleMapContainer' 的 div
使其默认显示：无。
在这个 div 中，声明 iframe 并将这个 iframe 的 src 属性分配给 index.aspx 页面。
现在锚标记的 onclick 调用一个 javascript 函数，该函数在内部将为上述声明的 div 调用查询模式对话框。
这将导致一个包含谷歌地图的弹出窗口。

<div id="GoogleMapContainer" title="Google Map Container" style="display: none;">
        <iframe id="frameGoogleMapContainer" height="100%" width="100%" src="index.aspx"
            frameborder="0" scrolling="auto"></iframe>
</div>

点击锚标记调用javascript函数。并在该javascript函数中编写以下代码：

$jq ("#GoogleMapContainer").dialog({ 模态：真，宽度：750，
标题：“谷歌地图”，可调整大小：假，
打开：函数（类型，数据）{ $jq(this).parent().appendTo("form"); } });

请建议这是正确的方法还是我需要做一些修改！

【讨论】：

【解决方案3】：

这样用……

      function initialize() 
        {     
            var latlng = new google.maps.LatLng(25.294371, 55.332642);     
            var myOptions = {       zoom: 8,       center: latlng,       mapTypeId: google.maps.MapTypeId.ROADMAP     };     
            var map = new google.maps.Map(document.getElementById("map_canvas"),

我的选项）；

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'Dubai'
            });
            var contentString = 'Dubai';

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 50
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });

        }  

    });

    </script>

现在只需在锚点单击或按钮单击时调用此 initialize() 函数.....

【讨论】：

但是弹出窗口怎么样，我需要在其中显示地图，还需要从锚点单击传递参数，因为我可能有很多国家要在地图中显示。