Question

我有一个自定义谷歌地图，我点了点，当你点击该图像时会显示一个HTML弹出窗口。

我创建了一个带有java脚本函数的文件，现在我想要当用户点击文件时在灯箱/ fancybox内打开文件。

图片所在的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>

我显示谷歌地图的客户代码

<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>

有人可以帮我整合这个。感谢。

Answer 1

这是你可以做到的一种方式（使用fancybox）。

首先（当然）包括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>

其次，我们在li的图片链接中添加了两个内容（我假设您有几个，具有不同的地址）。第一个是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 ...

接下来，我们最初隐藏地图，以便在我们启动我们的fancybox之前不会显示它。我们这样做是为了将p的高度设置为0.请注意，使用display: none会导致地图出现问题，因此请使用高度为0.

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

最后，做实际的fancybox代码。加载页面时，我们将fancybox添加到所有图像链接。在fancybox构造函数中，我们告诉它每次启动时都使用链接的showAddress属性中的地址调用data。

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

瞧！应该这样做:-)如果它不起作用，here's my entire code (slighly messy) that I used to try it out

灯箱内的谷歌地图

1 个答案: