Question

好的！我一直试图弄清楚如何设置我的循环，以便能够在Google地图中通过数据库中的循环生成信息窗口的可点击引脚。我可以让它显示所有的引脚，但是一旦我加入它们就可以点击它，它就会停止。

注意：

如果我只有一个针，它可以正常工作。我对Javascript知之甚少，所以它可能很简单。

        <script type="text/javascript"> function init_map()
                        {var myOptions = {zoom:14,center:new google.maps.LatLng(44.4765519,-73.21252950000002),mapTypeId: google.maps.MapTypeId.ROADMAP};

                map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
                <?php
                if (mysqli_num_rows($result) > 0)
                {
                  while($row = $result->fetch_assoc())
                  {
                ?>

                        marker = new google.maps.Marker(
                            {map: map,position: new google.maps.LatLng(<?php echo $row["fldLatLong"] ?>)}
                            );
google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});
                  <?php }}; ?>

                        </script>

Answer 1

你想做什么，可能更像是这样的

<?php
$mysqli = new mysqli('localhost', 'root', '', 'stackoverflow'); // use your own settings
$result = $mysqli->query("SELECT fldLatLong FROM city");
$loc = array();
if (mysqli_num_rows($result) > 0) {
  while($row = $result->fetch_assoc()) {
    $loc[] = explode(',', $row["fldLatLong"]);  //  it's even better if you have a separate lat and lng in the database
  }
  // make the array javascript-readable
  $locations = 'var locations = ' . json_encode($loc) . ';';
}
?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
<?php echo $locations; ?>  // array of the locations
var markers = [];   // marker objects in an array
function init_map() {
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(50.8625502000,4.3796600000),  // (44.4765519,-73.21252950000002),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
  var infowindow = new google.maps.InfoWindow({
    content: 'Hello World!'
  });
  for(var i=0; i<locations.length; i++) {
    marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(locations[i][0], locations[i][1])
    });
    // store the marker in the array
    markers.push(marker);
    google.maps.event.addListener(marker, "click", function() {
      // the marker tha has been clicked upon, is "this".
      // we search in the array of markers objects to see which marker was clicked upon
      var index = markers.indexOf(this);  
      var content = 'Dummy content of marker ' + index;
      infowindow.setContent(content);
      infowindow.open(map, markers[index]);
    });
  }
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<style>
#gmap_canvas {
  height: 500px;
}
</style>
<div id="gmap_canvas"></div>

谷歌地图JS v3 Mysql While循环

1 个答案: