灯箱内的谷歌地图

发布于 2024-10-18 10:48:37 字数 4965 浏览 2 评论 0原文

我有一个自定义的谷歌地图，我在上面放置了点，当您单击该图像时，会显示一个 HTML 弹出窗口。

我创建了一个带有java脚本函数的文件，现在我希望当用户单击图像时，文件会在灯箱/花式箱内打开。

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

有人可以帮我集成这个吗？谢谢。

原文

I have a custom google map that I put points on and an HTML popup window shows when you click on that image.

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.

My HTML Page where image is located.(Source Code)

<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&v=2&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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请你别敷衍 2024-10-25 10:48:37

这是一种方法（使用 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 构造函数中，我们告诉它每次启动时使用链接的 data 属性中的地址调用 showAddress。

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

瞧！应该可以:-)如果它不起作用，这是我用来尝试的整个代码（有点混乱）

Here's one way you can do it (using fancybox).

First (of course) include the fancybox and jQuery libraries if you haven't already.

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

<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. 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 style="height: 0px; overflow: hidden;">
    <div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
</p>

Lastly, do the actual fancybox code. When the page is loaded, we add fancybox to all the image links. In the fancybox constructor, we tell it to call showAddress every time it starts, using the address from the link's data attribute.

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

回复收藏 0 原文

~没有更多了~