Question

我正在尝试在Google地图上显示以下坐标，但不知何故。我认为问题出在我从数据库中检索到的坐标上，我试图完全像这样

['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']

但是我不知道为什么当我将其更改为这个时它不起作用。

<?php

$coord = $mysqli->query("SELECT * FROM tbl_infrastructure");
while ($lock = mysqli_fetch_assoc($coord)){
      $dataLat[] = ($lock['inf_lat']);
      $dataLong[] = ($lock['inf_long']); 
      $dataName[] = ($lock['inf_Name']); 
    }
?>
<!--The div element for the map -->

<script type="text/javascript">
  google.charts.load('current', {
    'packages':['map'],
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });

  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Lat', 'Long', 'Name'],
      [<?php echo "$dataLat[0]";?>, <?php echo "$dataLong[0]"?>, <?php echo "$dataName[0]";?>],
      [<?php echo "$dataLat[1]";?>, <?php echo "$dataLong[1]"?>, <?php echo "$dataName[1]";?>],
      [<?php echo "$dataLat[2]";?>, <?php echo "$dataLong[2]"?>, <?php echo "$dataName[2]";?>],
      [<?php echo "$dataLat[3]";?>, <?php echo "$dataLong[3]"?>, <?php echo "$dataName[3]";?>],
      [<?php echo "$dataLat[4]";?>, <?php echo "$dataLong[4]"?>, <?php echo "$dataName[4]";?>],
      [<?php echo "$dataLat[5]";?>, <?php echo "$dataLong[5]"?>, <?php echo "$dataName[5]";?>],
      [<?php echo "$dataLat[6]";?>, <?php echo "$dataLong[6]"?>, <?php echo "$dataName[6]";?>],
      [<?php echo "$dataLat[7]";?>, <?php echo "$dataLong[7]"?>, <?php echo "$dataName[7]";?>],
      [<?php echo "$dataLat[8]";?>, <?php echo "$dataLong[8]"?>, <?php echo "$dataName[8]";?>]
    ]);

    var options = {
      icons: {
        default: {
          normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
          selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
        }
      }
    };

    var map = new google.visualization.Map(document.getElementById('map_markers_div'));
            map.draw(data, options);
          }

</script>
<div id="map_markers_div" style="width: 400px; height: 300px"></div>

Answer 1

在PHP中，它像这样“工作”；考虑改变地点的数量...

<?php
     $data = array();
     $query = $mysqli->query("SELECT * FROM tbl_infrastructure");
     while ($row = mysqli_fetch_assoc($query)) {
         if(sizeof($data) == 0) {
             array_push($data, implode(array('"Lat"', '"Lng"', '"Name"'), ', '));
         } else {
             array_push($data, implode(array((float) $row['inf_lat'], (float) $row['inf_long'], '"'.$row['inf_Name'].'"'), ', '));
         }
    }
?>

并输出：

var data = google.visualization.arrayToDataTable([
<?php for($i=0; $i < sizeof($data); $i++) { ?>
    [<?php echo $data[$i]; ?>],
<?php } ?>
]);

Answer 2

谢谢大家，它可以工作...

<script type="text/javascript">
  google.charts.load('current', {
    'packages':['map'],
    // Note: you will need to get a mapsApiKey for your project.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'Change this mapsAPIKEY'
  });
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Lat', 'Long', 'Name'],
                                [<?php echo $dataLat[0];?>, <?php echo $dataLong[0]?>, '<?php echo $dataName[0];?>'],
                                [<?php echo $dataLat[1];?>, <?php echo $dataLong[1]?>, '<?php echo $dataName[1];?>'],
                                [<?php echo $dataLat[2];?>, <?php echo $dataLong[2]?>, '<?php echo $dataName[2];?>'],
                                [<?php echo $dataLat[3];?>, <?php echo $dataLong[3]?>, '<?php echo $dataName[3];?>'],
                                [<?php echo $dataLat[4];?>, <?php echo $dataLong[4]?>, '<?php echo $dataName[4];?>'],
                                [<?php echo $dataLat[5];?>, <?php echo $dataLong[5]?>, '<?php echo $dataName[5];?>'],
                                [<?php echo $dataLat[6];?>, <?php echo $dataLong[6]?>, '<?php echo $dataName[6];?>'],
                                [<?php echo $dataLat[7];?>, <?php echo $dataLong[7]?>, '<?php echo $dataName[7];?>'],
                                [<?php echo $dataLat[8];?>, <?php echo $dataLong[8]?>, '<?php echo $dataName[8];?>']
    ]);

    var options = {
      icons: {
        default: {
          normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
          selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
        }
      }
    };

    var map = new google.visualization.Map(document.getElementById('map_markers_div'));
    map.draw(data, options);
  }

</script>
<div id="map_markers_div" style="width: 1100px; height: 300px"></div>

无法在Google Maps中显示来自PHP的坐标

2 个答案: