Javascript 仅返回一行的查询(PHP/MYSQL)
在JavaScript中使用PHP返回一些行时,我遇到了一个问题 当我以纯文本形式回显结果时,效果很好。。但是,当我尝试用结果填充映射时,它只显示数据库中的一行/标记,而不显示表的其余部分 这是该页面的完整代码Javascript 仅返回一行的查询(PHP/MYSQL),javascript,php,mysql,arrays,Javascript,Php,Mysql,Arrays,在JavaScript中使用PHP返回一些行时,我遇到了一个问题 当我以纯文本形式回显结果时,效果很好。。但是,当我尝试用结果填充映射时,它只显示数据库中的一行/标记,而不显示表的其余部分 这是该页面的完整代码 <?php include("header.php"); // Connect to the hydrants table and set ORDER BY to ASC or DESC $sql = "SELECT id, lat,
<?php include("header.php");
// Connect to the hydrants table and set ORDER BY to ASC or DESC
$sql = "SELECT id, lat, lng, flow, pressure, type, lid, updated FROM hydrants_OLD ORDER BY id ASC";
$result = $conn->query($sql);
// Display the results of the query
while($row = $result->fetch_assoc()) { ;
?>
<head>
<title>Hydrants</title>
<meta name="viewport" content="initial-scale=1.0">
<link rel="Shortcut Icon" href=images/hl.png>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="images/hl.png">
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Hydrants">
<link rel="apple-touch-icon" href="images/h-apple.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/h-apple.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="images/h-apple.png">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body bgcolor="#ffffff">
<?php
$lat = $row['lat'];
$lng = $row['lng'];
$id = $row['id'];
$flow = $row['flow'];
$pressure = $row['pressure'];
$type = $row['type'];
$lid = $row['lid'];
$updated = $row['updated'];
?>
<?php echo $id, $lat, $lng, $flow, $pressure, $type, $lid, $updated, "<br>" ; } ?>
<div id="map"></div>
<script>
var map, infoWindow;
function initMap(){
// Map options
var options = {
// zoom:17,
zoom:14,
center: {lat: 53.428345, lng: -6.244447},
}
var map = new google.maps.Map(document.getElementById('map'), options);
// Array of markers
var markers = [
// HYDRANTS
{ coords:{lat:<?php echo $lat ?>,lng:<?php echo $lng ?>}, iconImage:'images/hs.png', content:'<h2>Hydrant - Number <?php echo $id ?></h2><b>Flow</b> <?php echo $flow ?> Liters per minute<br><b>Pressure</b> <?php echo $pressure ?> bar<br><br><?php echo $type ?><br><?php echo $lid ?><br><br><center><a href=images/hydrants/<?php echo $id ?>.jpg><img src=images/hydrants/<?php echo $id ?>.jpg width=100%></a>Updated <?php echo $updated ?><br><br><a href="report.php?id=<?php echo $id ?>">Report problem with this hydrant</a></center>' }
];
// Loop through markers
for(var i = 0;i < markers.length;i++){
// Add marker
addMarker(markers[i]);
}
// Add Marker Function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
//icon:props.iconImage
});
// Check for customicon
if(props.iconImage){
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
}
}
infoWindow = new google.maps.InfoWindow;
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=0000MYAPIKEY0000&callback=initMap">
</script>
</body>
<?php
// Close database connection
$conn->close();
?>
消防栓
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高:100%;
}
/*可选:使示例页面填充窗口*/
html,正文{
身高:100%;
保证金:0;
填充:0;
}
var映射,信息窗口;
函数initMap(){
//地图选项
变量选项={
//缩放:17,
缩放:14,
中心:{lat:53.428345,lng:-6.244447},
}
var map=new google.maps.map(document.getElementById('map'),options);
//标记数组
变量标记=[
//消防栓
{coords:{lat:,lng:},图标:'images/hs.png',内容:'消火栓-每分钟流量升数
压力棒
更新
'
];
//循环标记
对于(变量i=0;i
问题在于循环部分中有html代码,这意味着要为每个坐标创建一个地图。考虑到您的代码,我认为最好的方法是创建一个标记数组,然后使用JSON\u encode
方法将其转换为JSON,并将其打印到javascript代码上的变量
// Display the results of the query
$markers = [];
while($row = $result->fetch_assoc()) {
$markers[] = [
'coords' => [
'lat' => $row['lat'],
'lng' => $row['lng']
],
'iconImage' => 'images/hs.png',
'content' => "<h2>Hydrant - Number {$row['id']}</h2><b>Flow</b> {$row['flow']} Liters per minute<br><b>Pressure</b> {$row['pressure']} bar<br><br>{$row['type']}<br>{$row['lid']}<br><br><center><a href=images/hydrants/{$row['id']}.jpg><img src=images/hydrants/{$row['id']}.jpg width=100%></a>Updated {$row['updated']}<br><br><a href=\"report.php?id={$row['id']}\">Report problem with this hydrant</a></center>"
];
}
//显示查询结果
$markers=[];
而($row=$result->fetch_assoc()){
$markers[]=[
“coords”=>[
'lat'=>$row['lat'],
“液化天然气”=>$row[“液化天然气”]
],
'iconImage'=>'images/hs.png',
'content'=>“消火栓-编号{$row['id']}流量{$row['Flow']}升/分钟
压力{$row['Pressure']}巴
{$row['type']}
{$row['lid']}
更新{$row['Updated']}
”
];
}
然后在javascript上,只需添加如下变量并打印编码结果:
var markers = <?php echo json_encode($markers); ?>;
var标记=;
整个代码:
<?php include("header.php");
// Connect to the hydrants table and set ORDER BY to ASC or DESC
$sql = "SELECT id, lat, lng, flow, pressure, type, lid, updated FROM hydrants_OLD ORDER BY id ASC";
$result = $conn->query($sql);
// Display the results of the query
$markers = [];
while($row = $result->fetch_assoc()) {
$markers[] = [
'coords' => [
'lat' => $row['lat'],
'lng' => $row['lng']
],
'iconImage' => 'images/hs.png',
'content' => "<h2>Hydrant - Number {$row['id']}</h2><b>Flow</b> {$row['flow']} Liters per minute<br><b>Pressure</b> {$row['pressure']} bar<br><br>{$row['type']}<br>{$row['lid']}<br><br><center><a href=images/hydrants/{$row['id']}.jpg><img src=images/hydrants/{$row['id']}.jpg width=100%></a>Updated {$row['updated']}<br><br><a href=\"report.php?id={$row['id']}\">Report problem with this hydrant</a></center>"
];
// echo "{$row['id']}, {$row['lat']}, {$row['lng']}, {$row['flow']}, {$row['pressure']}, {$row['type']}, {$row['lid']}, {$row['updated']}, <br>" ;
}
?>
<head>
<title>Hydrants</title>
<meta name="viewport" content="initial-scale=1.0">
<link rel="Shortcut Icon" href=images/hl.png>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="images/hl.png">
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Hydrants">
<link rel="apple-touch-icon" href="images/h-apple.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/h-apple.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="images/h-apple.png">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body bgcolor="#ffffff">
<div id="map"></div>
<script>
var map, infoWindow;
function initMap(){
// Map options
var options = {
// zoom:17,
zoom:14,
center: {lat: 53.428345, lng: -6.244447},
}
var markers = <?php echo json_encode($markers); ?>;
var map = new google.maps.Map(document.getElementById('map'), options);
// Loop through markers
for(var i = 0;i < markers.length;i++){
// Add marker
addMarker(markers[i]);
}
// Add Marker Function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
//icon:props.iconImage
});
// Check for customicon
if(props.iconImage){
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
}
}
infoWindow = new google.maps.InfoWindow;
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=0000MYAPIKEY0000&callback=initMap">
</script>
</body>
<?php
// Close database connection
$conn->close();
?>
您正在为数据库中的每个条目创建完整的html,这意味着您有n个头
标记,n个体
标记。。。修复代码以提取循环外部的公共结构,从而创建有效的html。另外,你问题的标题不准确-如果php重复了多个结果,那么你的查询就不是问题所在。谢谢你的回答,我根本不是专家,我感谢你的帮助。。然而,我现在在第18行“解析错误:语法错误,意外的‘报告’(T_字符串),在第18行的index.php中应为'].”“不幸的是,我现在得到”此页面没有正确加载Google Maps。有关技术细节,请参阅JavaScript控制台。控制台中有“InvalidValueError:setPosition:not a LatLng或LatLngLiteral:在属性lat:not a number”“1.jpg:1 GET images/hydrants/1.jpg 404(not Found)”.2.jpg:1 GET images/hydrants/2.jpg 404(not Found)”“js?key=aizasyblvlfqjiwxrtvdjanpfaai5883g9t6&callback=initMap:55谷歌地图JavaScript错误:InvalidKeyMapError”“在markers
变量之后在javascript上添加以下代码:for(i in markers){markers[i].coords.lat=parseFloat(markers[i].coords.lat);markers[i].coords.lng=parseFloat(markers[i].coords.lng);}我会尽快尝试,现在我不得不去接电话了。。。谢谢你的帮助,没问题。很乐意帮忙