使用 JSON 将 JQuery Mobile 输出到 Google Maps 信息窗口

Posted 2023-05-09

【中文标题】使用 JSON 将 JQuery Mobile 输出到 Google Maps 信息窗口

【英文标题】：JQuery Mobile output to Google Maps info window using JSON

【发布时间】：2014-11-25 17:37:22

【问题描述】：

我正在尝试在单击标记时在 Google 地图信息窗口中实现动态列表视图。我正在使用一段我知道在我正在开发的应用程序的另一个方面取得成功的代码。

我显示的是一个空白的信息窗口，所以我只能猜测我在将输出分配给成为信息窗口内容的变量时出错了。

以下 JSON 代码在我的应用程序的其他地方成功

var file = "listview.php";
var output = '';

$.post(file, function(data) 

    $.each(data, function(index, value) 
        output += '<li><a href="#"">' + value.site_name + '</a></li>';
    ); 
$('#liststores').html(output).listview().listview('refresh');
, "json"); 

我已经分配了要在各种函数中使用的变量。我已经为 html 变量分配了一些用于信息窗口内容的 html 代码。然后将它们绑定到运行点击函数并设置信息窗口内容的函数。

for (var i = 0; i < markers.length; i++) 
    var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lon")));
    var html = '<div id="infowindow"><ul data-role="listview" id="liststores"></ul><div>';
    var marker = new google.maps.Marker(
        map: map,
        position: point,
        icon: icon.icon,
        id: id,
    );
    bindInfoWindow(marker, map, infoWindow, html);


function bindInfoWindow(marker, map, infoWindow, html) 
    google.maps.event.addListener(marker, 'click', function() 
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    );

任何建议将不胜感激。我相信我在将列表视图分配给 html 变量时犯了错误，因为 JSON 代码已成功分配给应用程序中的另一个列表视图。

我的代码中的所有其他内容都有效，标记被绘制到地图上，但标记单击不返回数据但没有错误。

【参考方案1】：

这可能是因为列表视图没有附加到 DOM，而只是在 javascript 变量中

您是否尝试过这样做

 var html = '<div id="infowindow"><ul data-role="listview" id="liststores">'+output+'</ul><div>';