jquery - 谷歌地图 V3 : Loading infowindow content via AJAX

标签 jquery google-maps google-maps-api-3

使用 ajax 将内容加载到我的信息窗口的最佳方法是什么? 现在我使用 iframe 得到了类似的效果,但我对此不太满意。 我认为这很简单,但由于某种原因它让我感到困惑。 这就是它现在的工作方式:

var markers = [];
  var infowindow = new google.maps.InfoWindow();
  $.each(JSON.parse(aulas), function(i, a){

    var latlng = new google.maps.LatLng(a.aula.lat, a.aula.lng);
    var marker = new google.maps.Marker({
      position : latlng,
      title: a.aula.title
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      infowindow.setContent("<div class='infowindow_content'><iframe src='aulas/show/" + a.aula.id + "'></iframe</div>");

      infowindow.open(map, marker);
    });
    markers.push(marker);
  });

在 infowindow.setContent 调用之前通过 ajax 获取内容很容易,但我想仅在 infowindow 打开时进行 ajax 调用。有什么想法吗?

顺便说一句:我正在使用 jQuery。

正如答案中所建议的,我决定将调用移至 setContent 并打开一个单独的函数。对于那些感兴趣的人来说,解决这个问题的代码是:

function load_content(marker, id){
  $.ajax({
    url: 'aulas/show/' + id,
    success: function(data){
      infowindow.setContent(data);
      infowindow.open(map, marker);
    }
  });
}

然后更改监听器:

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      load_content(marker, a.aula.id);
    });
    markers.push(marker);
  });

最佳答案

显示信息窗口后,您可以随时调用infowindow.setContent。因此,您最初可以使用微调器设置信息窗口内容,进行 AJAX 调用(从事件处理程序),然后使用适当的数据从 AJAX 响应中再次调用 infowindow.setContent

关于jquery - 谷歌地图 V3 : Loading infowindow content via AJAX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3381700/

相关文章:

javascript - 如何禁止 jquery 函数在一定时间内执行

mysql - 在 MYSQL 中用 2 个坐标(以米为单位)计算地球上距离的最佳方法是什么?

javascript - 在 google maps api v3 (javascript) 中获取 dragend 标记的旧位置

jquery - 如何使用 jquery 设置鼠标悬停?

jQuery 可拖动 : the draggable box go over the container - bug?

javascript - 在索引页面中包含 angularjs 的优先顺序?

r - 在 Google Maps API 中制作多个样式引用

android - 我的应用应该多久使用 GPS 更新一次用户的位置?每 1 秒是矫枉过正还是罚款?

IOS map (谷歌地图 API 与 MapKit?)

google-maps-api-3 - 在代理后面映射 api v3