单击表格行时打开信息窗口
Opening Info Window when clicking a table row
我正在尝试从MySQL表中加载多个城市的ID,名称和位置,然后将其填充到HTML表中。还有一个谷歌地图,上面有指向这些城市的标记。
我希望当用户单击 HTML 行之一(tr 标记)时,在城市标记上弹出一个信息窗口。我正在使用PHP,Javascript和XML,没有任何jQuery。
我的网页:
<?php
$query = "SELECT id, name, lat, lng FROM city ORDER BY id";
$arrCities = mysql_query ($query);
?>
<div id="gmap" style="width: 550px; height: 450px"></div>
<table id="tblData">
<tr>
<th>ID</th>
<th>City</th>
</tr>
<?php while ($row = mysql_fetch_assoc($arrCities)) { ?>
<tr id="<?php echo $row['id']; ?>">
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
</tr>
<?php } ?>
</table>
我的PHP用于创建一个XML来填充标记(my-xml-generator.php):
<?php
$query = "SELECT id, name, lat, lng FROM city ORDER BY id";
$arrCities = mysql_query ($query);
$dom = new DOMDocument('1.0', 'utf-8');
$node = $dom->createElement ('markers');
$parNode = $dom->appendChild ($node);
header('Content-type: text/xml');
while ($row = mysql_fetch_assoc($arrCities))
{
$node = $dom->createElement ('marker');
$newNode = $parNode->appendChild ($node);
$newNode->setAttribute ('id', $row['id']);
$newNode->setAttribute ('name', $row['name']);
$newNode->setAttribute ('lat', $row['lat']);
$newNode->setAttribute ('lng', $row['lng']);
}
echo $dom->saveXML();
?>
我的Javascript:
var gmap = new google.maps.Map (mapDiv, options);
var arrMarkers = [];
var infoWindow = new google.maps.InfoWindow;
// add markers to the map
DownloadUrl ("my-xml-generator.php", function(data)
{
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName ("marker");
for (var i = 0; i < markers.length; i++)
{
var id = markers[i].getAttribute("id");
var lat = parseFloat (markers[i].getAttribute("lat"));
var lng = parseFloat (markers[i].getAttribute("lng"));
var pos = new google.maps.LatLng (lat, lng);
var markerOptions =
{
position : pos,
map : gmap,
draggable : false
};
// add the marker
var marker = new google.maps.Marker (markerOptions);
arrMarkers.push(marker);
// this part of code is not working
var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { RowClick(i); });
// add info window
var html = '<div>' + id + '</div>';
BindInfoWindow (marker, gmap, infoWindow, html);
}
});
function BindInfoWindow (marker, map, infoWindow, html)
{
google.maps.event.addListener (marker, "click", function()
{
infoWindow.setContent (html);
infoWindow.open (map, marker);
});
}
function RowClick (i)
{
google.maps.event.trigger (arrMarkers[i], "click");
}
function DownloadUrl (url, callback)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
xhr.onreadystatechange = DoNothing;
callback(xhr, xhr.status);
}
};
xhr.open ('GET', url, true);
xhr.send (null);
}
function DoNothing() {}
不起作用的部分是上面javascript中的这一部分:
var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { RowClick(i); });
正确的方法是什么?
附加信息:如果我将我的 javascript 更改为这样:
var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { alert(tr.id); });
然后,当我单击该行时会弹出警报框,但是无论我单击哪一行,显示的ID都将始终是最后一行的ID。谢谢
该
函数接受回调,但要保存变量状态,您必须将其设置为闭包。
我认为这应该有效。
google.maps.event.addDomListener (tr, "click",
(function(i){
var row = i;
return function(){
RowClick(row);
}
})(i)
);
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 定义完全独立的样式信息
- 使用html2canvas获取基本信息
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 从信息框调用弹出图像库
- 如何在不传递此信息的情况下查找被调用的元素
- 将谷歌自动完成地址信息放在页面上,而不是表格中
- 如何通过解析类信息来使用jQuery创建类
- 包含数据库中相关信息的开放模态
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- ng在更新$scope后重复不更新信息
- 谷歌地图点击潜水触发信息窗口
- 根据CHECKBOX输入值动态更新DIV信息
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- Jquery on单击“显示信息”
- 将FlowPlayer嵌入谷歌地图信息窗口
- AEM(cq5)使用组件内的信息
- 如何在完整日历中的当天点击时显示活动详细信息
- 使用javascript后台脚本获取Yotutube频道信息