灯箱内的谷歌地图

Question

I have a custom google map that I put points on and an HTML popup window shows when you click on that image. 我有一个自定义谷歌地图，我点了点，当你点击该图像时会显示一个HTML弹出窗口。

I had created a file with java script functions, Now i want when a user click on a image that file opens inside light box/fancybox. 我创建了一个带有java脚本函数的文件，现在我希望当用户点击文件时，在灯箱/ fancybox中打开该文件。

My HTML Page where image is located.(Source Code) 我的HTML页面所在的图像。（源代码）

<li class="loaction1">


                        <span class="loactionImg">
                             <a  href="" target=""><img src="<?php bloginfo('template_url'); ?>/images/location.jpg" alt=""></a>
                        </span>
                        <span class="addressdet">
                            <span>Address:</span><br/>
                             Ball Road<br/>
                            Anaheim<br/>
                        </span>
                        <span class="storTimings">
                            <span>Timings:</span><br/>
                            Mon-Sat 6am - 6pm<br/>
                            Closed Sunday<br/>
                            <a href="#">(map and directions)</a>
                        </span>
                    </li>

My Custome code for Displaying google Map Is 我显示谷歌地图的客户代码

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAgrj58PbXr2YriiRDqbnL1RSqrCjdkglBijPNIIYrqkVvD1R4QxRl47Yh2D_0C1l5KXQJGrbkSDvXFA"
      type="text/javascript"></script>
    <script type="text/javascript">

 function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var center = new GLatLng(33.86456,-117.99803);
        map.setCenter(center, 15);
        geocoder = new GClientGeocoder();
        var marker = new GMarker(center, {draggable: true});
        map.addOverlay(marker);
        document.getElementById("lat").innerHTML = center.lat().toFixed(5);
        document.getElementById("lng").innerHTML = center.lng().toFixed(5);

      GEvent.addListener(marker, "dragend", function() {
       var point = marker.getPoint();
          map.panTo(point);
       document.getElementById("lat").innerHTML = point.lat().toFixed(5);
       document.getElementById("lng").innerHTML = point.lng().toFixed(5);

        });


     GEvent.addListener(map, "moveend", function() {
          map.clearOverlays();
    var center = map.getCenter();
          var marker = new GMarker(center, {draggable: true});
          map.addOverlay(marker);
          document.getElementById("lat").innerHTML = center.lat().toFixed(5);
       document.getElementById("lng").innerHTML = center.lng().toFixed(5);


     GEvent.addListener(marker, "dragend", function() {
      var point =marker.getPoint();
         map.panTo(point);
      document.getElementById("lat").innerHTML = point.lat().toFixed(5);
         document.getElementById("lng").innerHTML = point.lng().toFixed(5);

        });

        });

      }
    }

       function showAddress(address) {
       var map = new GMap2(document.getElementById("map"));
       map.addControl(new GSmallMapControl());
       map.addControl(new GMapTypeControl());
       if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
          document.getElementById("lat").innerHTML = point.lat().toFixed(5);
       document.getElementById("lng").innerHTML = point.lng().toFixed(5);
         map.clearOverlays()
            map.setCenter(point, 14);
   var marker = new GMarker(point, {draggable: true});
         map.addOverlay(marker);

        GEvent.addListener(marker, "dragend", function() {
      var pt = marker.getPoint();
         map.panTo(pt);
      document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
         document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
        });


     GEvent.addListener(map, "moveend", function() {
          map.clearOverlays();
    var center = map.getCenter();
          var marker = new GMarker(center, {draggable: true});
          map.addOverlay(marker);
          document.getElementById("lat").innerHTML = center.lat().toFixed(5);
       document.getElementById("lng").innerHTML = center.lng().toFixed(5);

     GEvent.addListener(marker, "dragend", function() {
     var pt = marker.getPoint();
        map.panTo(pt);
    document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
       document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
        });

        });

            }
          }
        );
      }
    }
    </script>
  </head>


<body onload="load()" onunload="GUnload()" >


  <p>
      <div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
   </p>
  </body>

</html>

Can some one help me to integrate this. 有人可以帮我整合这个。 Thanks. 谢谢。

Answer 1

Here's one way you can do it (using fancybox). 这是你可以做到的一种方式（使用fancybox）。

First (of course) include the fancybox and jQuery libraries if you haven't already. 首先（当然）包括fancybox和jQuery库（如果你还没有）。

<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.fancybox-1.3.4.pack.js"></script>

Second, we add two things to the image link in your li (which I assume you have several of, with different addresses). 其次，我们在你的li添加了两个图像链接（我假设你有几个，有不同的地址）。 The first is the href attribute, which will point to the map, and the second is a data attribute which will hold the actual address. 第一个是href属性，它将指向地图，第二个是一个data属性，它将保存实际地址。

<li class="loaction1">
    <span class="loactionImg">
        <a href="#map" data-yourwebsite-address="Ball Road, Anaheim">
            <img src="<?php bloginfo('template_url'); ?>/images/location.jpg" alt="">
        </a>
    </span>
    <!--... the rest of your content ...-->
</li>

<li class="loaction2">
    <span class="loactionImg">
        <a href="#map" data-yourwebsite-address="112 Beacon Street, Boston">
   ... and so on ...

Next up, we hide the map initially, so that it's not shown until we fire up our fancybox. 接下来，我们最初隐藏地图，以便在我们启动我们的fancybox之前不会显示它。 We do this for example by setting the height of the p to 0. Note that using display: none will cause some issues with the map, so use height 0. 例如，我们通过将p的高度设置为0来执行此操作。请注意，使用display: none将导致映射出现一些问题，因此请使用height 0。

<p style="height: 0px; overflow: hidden;">
    <div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
</p>

Lastly, do the actual fancybox code. 最后，做实际的fancybox代码。 When the page is loaded, we add fancybox to all the image links. 加载页面时，我们将fancybox添加到所有图像链接。 In the fancybox constructor, we tell it to call showAddress every time it starts, using the address from the link's data attribute. 在fancybox构造函数中，我们告诉它每次启动时都使用链接data属性中的地址调用showAddress 。

$(document).ready(function() 
{
    $(".loactionImg a").fancybox({
        onStart: function(evt) { showAddress($(evt).data("yourwebsite-address")); }
    });
});

And voilà! 瞧！ That should do it :-) If it doesn't work, here's my entire code (slighly messy) that I used to try it out 应该这样做:-)如果它不起作用，这是我以前尝试的全部代码（轻微凌乱）

灯箱内的谷歌地图

问题描述

1 个解决方案

解决方案1
2 2011-02-22 23:32:28

灯箱内的谷歌地图

问题描述

1 个解决方案

解决方案1 2 2011-02-22 23:32:28

解决方案1
2 2011-02-22 23:32:28