我正在尝试使用Javascript将保存在数据库中的PHP变量ID发送到显示谷歌地图标记的页面。我创建了一个列表来显示在PHP/HTML:中点击地图标记时显示的内容
$result = mysqli_query($con,"SELECT * FROM places");
while($row = mysqli_fetch_array($result))
{
echo "<div class='place-details' id='place-details' style='display: none'>";
echo "<table class='table'>";
echo "<tr><th>Name: </th><td>" . $row['name'] . "</td></tr>";
echo "<tr><th>Details: </th><td>" . $row['description'] . "</td></tr>";
echo"</table>";
echo "<td><a href='details.php?id=".$row['id']."' class='btn btn-warning btn-sm'>View</a></td></div>";
}
在Javascript中,我使用clone()在每个标记中显示这个列表:
var places = $("#place-details").clone().show();
google.maps.event.addListener(markers[i], "click", function () {
infowindow.setContent(places[0]);
infowindow.open(map, markers[i]);
map.setCenter(marker.getPosition());
map.setZoom(10);
});
"id"是自动创建的,它是一个具有自动增量的唯一密钥。问题是,当页面加载并单击事件标记时,它们都显示第一行id中的数据,而不是每个人自己的id,因此只显示保存在第一行中的信息。
更新:
for (var i in markers)
{
markers[i].setMap(null);
}
markers[i] = marker;
这一切都在功能内部:
place_info.parseData = function(data)
{
......
}
您只使用places[0]
。var places
是一个元素数组,因此,必须循环遍历这些元素。我假设var i
是从循环中生成的,请尝试setContent(places[i]);
。
在循环中使用places.length
作为上限可能是更好的途径。
将相同的id
属性放在多个元素上也是不好的做法。使用CSS类和相应的选择器来引用共享公共内容或属性的多个元素。