我正在建立一个网站,其中包括照片库功能。在图库页面中,有一个带有多个标记的 map (谷歌),每个标记都与特定的照片相关。
我的数据库中有一个“标记”表:
markers: id | name | address | lat | lng | gallery_id _______________________________________________________ 1 | .. | .... |.. | .. | 2 2 | .. | .... |.. | .. | 2 3 | .. | .... |.. | .. | 3 4 | .. | .... |.. | .. | 3 5 | .. | .... |.. | .. | 10 ......................
All the fields are populated with geolocated data and every row represents a specific photo uploaded by the user, all but gallery_id, that holds the id of the gallery that owns the photo.
In the gallery page there's the javascript to build up the google map:
<script type="text/javascript">
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var bounds = new google.maps.LatLngBounds();
//phpsqlajax-xmlgenerator.php, get the data from database
downloadUrl("phpsqlajax-xmlgenerator.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
animation: google.maps.Animation.BOUNCE
});
bindInfoWindow(marker, map, infoWindow, html);
bounds.extend(marker.position);
}
map.fitBounds(bounds);
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
我向 downloadURL 提供了 phpsqlajax-xmlgenerator.php
文件,我用它构建了保存标记表数据的 xml 文件:
<?php
//Start xml file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Opens a connection to a MySQL server
$conn = mysqli_connect('localhost', 'root', 'password', 'database');
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
//Select rows in the markers table
$query = "
SELECT * FROM `markers` WHERE 1;
";
$result = mysqli_query($conn, $query);
header("Content-type: text/xml");
// Iterate through the rows
while ($row = mysqli_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name",$row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("type", $row['type']);
}
echo $dom->saveXML();
?>
到目前为止,一切都运行良好,只要数据库中只有一个画廊, map 和标记都是正确的。
现在我的问题来了:我需要一种方法来向 phpsqlajax-xmlgenerator.php 提供 gallery_id,以便执行正确的查询,因为旧查询只返回每一行标记,无论画廊如何。我想将 phpsqlajax-xmlgenerator.php 代码放在 gallery.php 页面的顶部并直接在页面上生成 xml 文件,但是我应该向 downloadURL 函数提供什么?画廊.php?我考虑的另一种方法是将某种 $_GET
请求放入 downloadURL 参数中,但我找不到正确执行该操作的方法。
最佳答案
将 gallery_id 与 URL 一起传递,例如:
downloadUrl("phpsqlajax-xmlgenerator.php?id=3", function(data) {
并根据get-parameter构建sql:
$id=@intval($_GET['id']);
if($id<1){
exit();
}
$query = 'SELECT * FROM `markers` WHERE gallery_id='.$id;
关于javascript - 动态 downloadURL( ) 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30261827/