简体   繁体   English

查询只返回一行(PHP / MYSQL)

[英]Query only returning one row (PHP / MYSQL)

I have an issue when trying to return some rows using PHP within JavaScript...尝试在 JavaScript 中使用 PHP 返回一些行时遇到问题...

When i echo the results as plain text it works fine.. however when i try to populate the map with the results it only shows one row/marker from the database and not the rest of the table当我将结果作为纯文本回显时,它工作正常..但是,当我尝试用结果填充地图时,它只显示数据库中的一行/标记,而不显示表的其余部分

screenshot shows only one marker returning on map instead of all results from the database屏幕截图显示地图上仅返回一个标记,而不是数据库中的所有结果

here is the full code for the page..这是页面的完整代码..

            <?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();

    ?>

The problem is that you have html code inside the loop section, meaning you're creating a map for each coordinate.问题是您在循环部分中有 html 代码,这意味着您正在为每个坐标创建一个地图。 I think the best approach, considering your code, is to create an array of markers and then converting it to JSON using the json_encode method and printing it to a variable on your javascript code.我认为,考虑到您的代码,最好的方法是创建一个标记数组,然后使用json_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>"
    ];
}

Then on your javascript, simply add a variable like this and print the encoded result:然后在您的 javascript 上,只需添加一个像这样的变量并打印编码结果:

var markers = <?php echo json_encode($markers); ?>;

The whole code:整个代码:

<?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();

?>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM