谷歌地图信息窗口中的 AJAX 链接

Question

我目前正在编写一个广泛使用谷歌地图 API (v3) 的 Rails 3 应用程序。目前，每个标记的信息窗口都包含一个链接，该链接将用户带到该特定标记的页面 - 即。 /地方/1。我的代码示例如下：

jQuery.getJSON("/places", function(json) {
      if (json.length > 0) {
        for (i=0; i<json.length; i++) {
          var place = json[i];
          var category = json[i].tag;
          addLocation(place,category);
        }
      }
    });

    function addLocation(place,category) {
   var marker = new google.maps.Marker({

位置：新 google.maps.LatLng(place.lat, place.lng), 地图：地图， 标题：地点.名称， 图标：图片[place.tag] });

      marker.mycategory = category;
      gmarkers.push(marker);

      google.maps.event.addListener(marker, 'click', function() {
        if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow({
          content: "<h3>"+ place.name +"</h3><p>" + place.tag +"</p><a href='/places/"+place.id+"'>Show more!</a>"
        });
        infowindow.open(map, marker);
});
 }

到目前为止，这一切都很好，但我想通过引入 AJAX 调用来消除用户单击信息窗口链接后发生的页面刷新。这可能吗？任何帮助将不胜感激！

编辑：

.live 函数需要针对 infowindow 链接，因为 infowindows 通常是在 DOM 准备好之后创建的。所以我可以点击链接，但我正在努力从我的 map.js 文件中更新部分页面。我现在有这样的事情：

jQuery('#place_link').live('click', function() {
  //alert("You clicked here.");
  jQuery('#place_details').load('/places/"+place.id" #place_details');
  return false;
});

...#place_details 包含有关我想通过 AJAX 调用更新的标记的信息。正如我上面提到的， .live 部分工作正常，因为单击链接时会出现警报（未注释掉时）。我该如何实现这一目标？

Answer 1

在this question 的大力帮助下已解决。在我的 map.js 文件中：

jQuery(document).ready(function(){
  mapInit();
  jQuery('#place_link').live('click', function() {
    var url = jQuery(this).attr('href');
    jQuery.ajax({
      beforeSend: function(request) { request.setRequestHeader("Accept", "text/javascript"); },
      success: function(response) { jQuery('#place_details').empty().append(response); },
      type: 'get',
      url: url
    });
    return false;
  });
});

在我看来：

<div id="map" style="width: 100%; height: 500px;"></div>
<form action="#">
  Attractions: <input type="checkbox" id="attractionbox"/> &nbsp;&nbsp;
  Food and Drink: <input type="checkbox" id="foodbox" /> &nbsp;&nbsp;
  Hotels: <input type="checkbox" id="hotelbox" /> &nbsp;&nbsp;
  Towns/Cities: <input type="checkbox" id="citybox" /><br />
</form>

<p id="notice"><%= notice %></p>

<div id="place_details">
  <%= render 'placeshow' %> 
</div>

在我的控制器中：

def show
  @place = Place.find(params[:id])

  respond_to do |format|
    format.html { render :action => "show" and return }
    format.json { render :json => @places.all }
    format.js { render :partial => "placeshow", :layout => false and return }
  end
end

有效！

Answer 2

所以，如果我理解正确，您希望 infowindow 链接向服务器进行 AJAX 回调以检索“显示更多！”的内容，对吗？

这大约有三个部分，其中第三部分可能是您真正要问的？

1. 使服务器端能够响应 Javascript 调用
2. 使用 JQuery.get() 之类的方式构造对服务器的 Javascript 调用
3. 拦截链接点击拨打电话

对于第 3 部分，我相信您至少有 2 个选择：

1. 使用JQuery.click()（参见here）创建一个JQuery 事件处理程序，向链接添加一些CSS 类或ID，以便您可以定位它/它们。
2. 将onclick 处理程序嵌入到链接中并在其中进行AJAX 调用。

在这两种情况下，您的处理程序都必须返回 false 以停止浏览器执行正常的 GET 并刷新链接。