Question

所以我有下面的代码。当我运行它时它没有显示任何内容。只是浏览器上的白色空白页面。它应该是一个带有标记（多个）的googlemap。我想知道我的代码有什么问题，因为它根本没有显示任何错误。

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <?php include 'Location.php';?>
  
  <script type="text/javascript">
    var locations = <?php echo json_encode($location); ?>;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(6.40, 125.60),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {

		loc_array = locations[i].split(",");

		marker = new google.maps.Marker({
			position: new google.maps.LatLng(loc_array[1], loc_array[2]),
			map: map
		});

		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
				infowindow.setContent(loc_array[0]);
				infowindow.open(map, marker);
			}
		})(marker, i));
    }
  </script>
</body>
</html>

并且Location.php文件包含以下数据：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tsunami_simulation";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

//========================================================
	$sql='SELECT a.Household_Name, b.Latitude, b.Longitude FROM household a, location b WHERE a.Household_ID = b.Household_ID;';
	$result = mysqli_query($conn, $sql);
		
	if(mysqli_num_rows($result) > 0){
		// output data of each row
		
		//while($row = mysqli_fetch_assoc($result)) {
        //echo "Household Name: " . $row["Household_Name"]. " - Latitude: " . $row["Latitude"]. " - Longitude " . $row["Longitude"] ."<br>";
		//}		
		for($i=0;$i<mysqli_num_rows ( $result );$i++){
			$row=mysqli_fetch_row($result);

			$location[]= $row[0].', '.$row[2].', '.$row[1].','.($i+1);
		}
		
	}else{echo "0 results";}
?>

Answer 1

首先，你有语法错误

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

将其更改为

var locations = "<?php echo json_encode($location); ?>";

之后你应该在locations变量中有一个字符串，所以你必须创建对象

locations = JSON.parse(locations)

我这样做了，似乎有效

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>


  <?php 

    $locations[] = 'name,6.00,125.50';
    $locations[] = 'name,6.05,125.55';
    $locations[] = 'name,6.10,125.60';
    $locations[] = 'name,6.15,125.65';
    $locations[] = 'name,6.20,125.70';
    $locations[] = 'name,6.25,125.75';

    ?> 

  <script type="text/javascript">

    var locations = '<?php echo json_encode($locations); ?>';
    locations = JSON.parse(locations)

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(6.40, 125.60),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();


    for (var i = 0; i < locations.length; i++) {

        loc_array = locations[i].split(",");

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(loc_array[1], loc_array[2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(loc_array[0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
  </script>
</body>
</html>

谷歌地图多标记。我的代码出了什么问题？

1 个答案: