Question

我正在尝试从数据库中获取数据，并将其传递给javascript以在Google地图上显示为标记。当我使用javascript var标记标记变量时，它可以正常工作，但是当我尝试获取数据库数据，将其传递到数组，对其进行编码并在javascript中使用它时，则会产生此不清楚的错误错误）;

$coordinates = array(); // Select all the rows in the markers table 
$query = "SELECT `locationLatitude`, `locationLongitude`,'ID' FROM `location_tab` "; 
$result = $mysqli->query($query) or die('data selection for google map failed: ' . $mysqli->error); 
while ($row = mysqli_fetch_array($result)) { 
    $latitudes = $row['locationLatitude']; 
    $longitudes = $row['locationLongitude']; 
    $ID= $row['ID']; 
    $coordinates[]= array('id'=>$ID,'lat'=>$latitudes,'lng'=>$longitudes ); 
    print_r($coordinates); 
} 
$markerss= json_encode($coordinates); 
?>

这是我的代码

<?php
/* Database connection settings */
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'location_db';
$mysqli = new mysqli($host,$user,$pass,$db) or die($mysqli->error);

$coordinates = array();

// Select all the rows in the markers table
$query = "SELECT  `locationLatitude`, `locationLongitude`,'ID' FROM 
`location_tab` ";
$result = $mysqli->query($query) or die('data selection for google map 
failed: ' . $mysqli->error);

while ($row = mysqli_fetch_array($result)) {

    $latitudes = $row['locationLatitude'];
    $longitudes = $row['locationLongitude'];
    $ID= $row['ID'];
    $coordinates[]= array('id'=>$ID,'lat'=>$latitudes,'lng'=>$longitudes );
}
$markerss= json_encode($coordinates);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Add Google Map with multiple markers to your website</title>
<style>
body { font-family:Arial, Helvetica, sans-serif; font-size:14px; }
h1 { clear:both; margin-bottom:30px; font-size:17px; }
h1 a { font-weight:bold; color:#0099FF; }
span { clear:both; display:block; margin-bottom:30px; }
span a { font-weight:bold; color:#0099FF; }

#google_map { width:100%; height:500px; border:1px dashed #000; }
</style>
</head>

<body>
<div class="contentDiv">

<div id="google_map"></div>
</div><!-- end of .contentDiv -->
<script type="text/jscript">
function initiateGoogleMap() {

  //Some properties we want to pass to the map  
  var options = {  
     mapTypeId: google.maps.MapTypeId.ROADMAP //All map types are -- 
  ROADMAP/SATELLITE/HYBRID/TERRAIN
  }; 


  //Initializing the map  
  var map = new google.maps.Map(document.getElementById('google_map'), 
options);  
  //map.setTilt(45);
  //google maps data from database
    <?php
            echo "var markerss=$markerss;\n";
        ?>

  //Multiple Markers
  var markers = [
      ['CAD-CAM Robotics Lab, Mechanical Engineering Department', 22.318861, 
  87.312747],
      ['Technology Guest House', 22.315967, 87.303832],
      ['Visveswaraya Guest House', 22.314685, 87.305177],
      ['G S Sanyal School of Telecommunications(GSST)', 22.317067, 
   87.312221],
      ['Technology Market', 22.314625, 87.300049],
      ['Central Research Facility', 22.320527, 87.313855],
      ['Naval Architecture Department', 22.320745, 87.314929],
      ['Central Library', 22.320189, 87.309660],
      ['School of Medical Science & Technology', 22.315848, 87.310758],
      ['Mining Department', 22.321509, 87.311274]
  ];


  //Info Contents
  var infoContents = [
      ["CAD-CAM Robotics Lab", "CAD-CAM Robotics Lab, Mechanical Engineering 
 Department, Indian Institute of Technology Kharagpur, India"],
      ["Technology Guest House", "Technology Guest House, Indian Institute 
of Technology Kharagpur, India"],
      ["Visveswaraya Guest House", "Visveswaraya Guest House, Indian 
Institute of Technology Kharagpur, India"],
      ["G S Sanyal School of Telecommunications(GSST)", "G S Sanyal School 
of Telecommunications(GSST), Indian Institute of Technology Kharagpur, 
India"],
      ["Technology Market", "Technology Market, Indian Institute of 
Technology Kharagpur, India"],
      ["Central Research Facility", "Central Research Facility, Indian 
Institute of Technology Kharagpur, India"],
      ["Naval Architecture Department", "Naval Architecture Department, 
Indian Institute of Technology Kharagpur, India"],
      ["Central Library", "Central Library, Indian Institute of Technology 
Kharagpur, India"],
      ["School of Medical Science & Technology", "School of Medical Science 
& Technology, Indian Institute of Technology Kharagpur, India"],
      ["Mining Department", "Mining Department, Indian Institute of 
Technology Kharagpur, India"],
  ];



  var bounds = new google.maps.LatLngBounds();
  //Create an object of InfoWindow class
  var infoWindow = new google.maps.InfoWindow();
  var marker, i;

  // Loop through markers array and place each marker on the map  
  for(i=0; i<markerss.length; i++) {
      var marker_position = new google.maps.LatLng(markerss[i][1], 
  markerss[i][2]);
      bounds.extend(marker_position);
      marker = new google.maps.Marker({
          position: marker_position,
          map: map,
          title: markerss[i][0]
      });

      //Assign each marker an info window, which will display in click event  
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
              infoWindow.setContent('<strong>'+infoContents[i][0]+'</strong> 
<br/><br/>'+infoContents[i][1]);
              infoWindow.open(map, marker);
          }
      })(marker, i));

      //Automatically center the map, so that all markers fit on the screen
      map.fitBounds(bounds);
  }

//Override zoom level of the map
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', 
 function(event) {
   this.setZoom(15);
   google.maps.event.removeListener(boundsListener);
 });      
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js? 
 key=AIzaSyC-dFHYjTqEVLndbN2gdvXsx09jfJHmNc8&callback=initiateGoogleMap"> 
</script>
</body>
</html>

Answer 1

您有一个没有别名的字符串“ ID”，这会导致$ rows数组中的无效索引产生错误（可能是您试图选择列ID，但错误地添加了单引号，然后更改了SELECT locationLatitude，locationLongitude，“ ID” AS ID 带有SELECT locationLatitude，locationLongitude，ID）

<?php

$coordinates = array(); 
// Select all the rows in the markers table 
$query = "SELECT locationLatitude, locationLongitude, 'ID' AS ID FROM location_tab "; 
$result = $mysqli->query($query) or die('data selection for google map failed: ' . $mysqli->error); 
while ($row = mysqli_fetch_array($result)) { 
    $latitudes = $row['locationLatitude']; 
    $longitudes = $row['locationLongitude']; 
    $ID= $row['ID']; 
    $coordinates[]= array('id'=>$ID,'lat'=>$latitudes,'lng'=>$longitudes ); 
    print_r($coordinates); 
} 
$markerss= json_encode($coordinates); 
?>

并在您的JavaScript中使用

        var markerss= <?= $markerss; . ';\n' ?>

Answer 2

替换以下代码。

//google maps data from database
<?php
        echo "var markerss=$markerss;\n";
    ?>

收件人

//google maps data from database var markerss = <?php echo $markerss; ?>

从数据库检索数据显示错误

2 个答案: