Question

我正在研究GMaps应用程序，通过getJSON（）检索图像，并填充弹出标记。

以下是我动态添加到标记的标记：

<div id="images"></div>                 
<div id="CampWindow" style="display:none;width:550px;height:500px;">
<h4 id="camp-title"></h4>
<p>View... (all links open in new windows)</p>
<ul>
    <li><a id="camp-hp-link" target="_blank" href="">camp home page</a></li>
    <li>information: <a id="camp-av-link" target="_blank" href="">availability</a> | <a id="camp-vi-link" target="_blank" href="">vital information</li>
</ul>
<p id="message"></p>

在过去的几天里，我一直在掏出我的眼睛和哇哇，试图将图像显示在CampWindow内部。然后，我决定横向思考，看看是否正在检索图像。然后我将图像移到了外面并确定为Bob（Hope），每次点击都会检索并刷新图像。

所以，我决定将图像保存在外面然后加载后，将它附加到CampWindow。它还没有工作;当我将div附加到主CampWindow div时，图像将不会显示。我用指针检查Firebug，它显示我的图像是空的。我再次尝试外面的图像，它显示图像。我已经尝试过追加和追加，但没有成功。我在这里错过了什么吗？

我没有更多的哇哇哇哇大叫了。请帮助。

  marker.clicked = function(marker){
    $("#images").html('');
    $('#camp-title').text(this.name);
    $('#camp-hp-link').attr('href', this.url);
    $('#camp-av-link').attr('href', this.url + '/tourism/availability.php');
    $('#camp-vi-link').attr('href', this.url + '/tourism/general.php');          

    // get resort images via jQuery AJAX call - includes/GetResortImages.inc.php
    $.getJSON('./includes/GetResortImages.inc.php', { park: this.park_name, camp: this.camp_name }, RetrieveImages);

    function RetrieveImages (data)
    {
      if ('failed' == data.status)
      {
        $('#messages').append("<em>We don't have any images for this rest camp right now!</em>");
      }
      else
      {
        if ('' != data.camp)
        {   
          $.each(data, function(key,value){
              $("<img/>").attr("src", value).appendTo('#images');
          }); 
        }
      }
    }
          //.append($("#images"));
    $("#CampWindow").show(); 
    var windowContent = $("<html />");              
    $("#CampWindow").appendTo(windowContent);        

    var infoWindowAnchor = marker.getIcon().infoWindowAnchor;
    var iconAnchor = marker.getIcon().iconAnchor;
    var offset = new google.maps.Size(infoWindowAnchor.x-iconAnchor.x,infoWindowAnchor.y-iconAnchor.y);
    map.openInfoWindowHtml(marker.getLatLng(), windowContent.html(), {pixelOffset:offset});             
  }
  markers.push(marker);
});

Answer 1

当您将<html>标记添加到网页时，它会混淆浏览器并且很可能是问题所在。我建议要像Pointy所说的那样做，并使用window.open()制作一个弹出窗口（查看this tutorial)，或者更好地尝试其中一个jQuery light box plugins。

我不确定你在谷歌地图上做了什么，所以我决定给你一个基本的例子。使用此脚本，如果单击#image div内的图像，它将打开一个与图像大小相同的弹出窗口。

$(document).ready(function(){
 $('#images img').click(function(){
  var padding = 20;
  var w = $(this).width() + padding;
  var h = $(this).height() + padding;
  var popup = '\
   <html>\
    <head>\
     <link type="text/css" href="popup-style.css" rel="stylesheet" />\
     <scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></scr'+'ipt>\
    </head>\
    <body>\
    <img src="' + $(this).attr('src') + '">\
    </body>\
   </html>';
  var pop = window.open('','Image View','toolbar=0,location=0,status=0,width=' + w + ',height=' + h + ',scrollbars=1,resizable=1');
  pop.document.write(popup);
  pop.document.close();
 })
});

注意：在字符串中添加脚本标记时，请确保将单词“script”分解，否则会出错。

更新＃2：好的，既然你想使用你拥有的东西，试试这个：

从campwindow中删除<html>标记，然后使用CSS和/或javascript定位您的campwindow。添加如下内容：

 var w = $(window).width();
 var h = $(window).height();
 // Add overlay and make clickable to hide popup
 // you can remove the background color and opacity if you want to make it invisible
 var $overlay = $('<div/>', {
  'id': 'overlay',
  css: {
   position   : 'absolute',
   height     : h + 'px',
   width      : w + 'px',
   left       : 0,
   top        : 0,
   background : '#000',
   opacity    : 0.5,
   zIndex     : 99
  }
 }).appendTo('body');
 // Position your popup window in the viewport
 $('#CampWindow').css({
  position: 'absolute',
  top     : $(window).scrollTop() + 50 + 'px',
  left    : w/2 - $('#CampWindow').width()/2 + 'px', // centers the popup
  zIndex  : 100
 })
 .fadeIn('slow');
 // Click overlay to hide popup
 $('#overlay').click(function(){
  $('#CampWindow').hide();
  $(this).remove(); // remove the overlay
 })

由getJSON检索的图像的<div>在append（）</div>之后消失

1 个答案: