-2

私はJQueryを初めて使用します。イベントを作成しようとしているので、テーブルの行をクリックすると何かが実行されますが、forループが発生しますが、それが機能していなかったので、ループを削除して警告を表示しました配列内にいくつのアイテムがあったか、それは0を警告します。ページの読み込み時に、スクリプトがデータベースからマーカーを生成し、それらをマップの左側にロードする理由はわかりません(これは正常に機能し、意図したとおりです)画面には、各停留所がどの通りにあるのかを示すテーブルが作成され、テーブルの行をクリックすると、マーカーを中央に配置してズームすることになっています (その部分は自分で理解できます)。配列には何もありません。その理由はわかりません。ありがとう。

  <?php
require_once('config.inc.php');
require_once($rootdir . $dirsubfolder . 'navbar.php');
include($rootdir . $dirsubfolder . 'php/findmarkers.php');
?>
<script>

$(document).ready(function() {
var arrMarkers = [];
var zoom = 6;
var initialLocation;
var map;
var markersArray = new Array();

$("table#listOfStops").find('tr').each(function() {
  $(this).on('click', function() {

      alert(arrMarkers.length);


  });
});

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 230; // Calculate the top offset
    $('#gmaps').css('height', (h - offsetTop));
  }).resize();
  loadScript();
});
function initialize() {
  geocode = new google.maps.Geocoder();
 var mapOptions = {
  zoom: 10,
  center: new google.maps.LatLng(56.7626362, -111.379652),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: false,
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE
  }
};

  map = new google.maps.Map(document.getElementById('gmaps'),
  mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    deleteOverlays();
    addMarker(event.latLng);
    updateTextFields(latitude, longitude);
  });
  <?php while($stmt -> fetch()) { ?>
  var long = "<?php echo $gLongitude ?>";
  var lati = "<?php echo $gLatitude; ?>";
  var title = "<?php echo $gTitle; ?>"
  setMarker(lati, long, title);
  <? } $stmt -> close(); $mysqli -> close();?>



}

function setMarker(lat,lon, markerTitle) {
  var latLonMarker = new google.maps.LatLng(lat,lon);
  marker = new google.maps.Marker({
    position: latLonMarker,
    map: map,
    icon: 'icon.png',
    title: markerTitle
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    $('#inputLatitude').val(this.getPosition().lat());
    $('#inputLongitude').val(this.getPosition().lng());
  });
  arrMarkers.push(marker);
}


function loadScript() {
  var script = document.createElement('script');
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&' +
  'callback=initialize';
  document.body.appendChild(script);
}
</script>

<?php include($rootdir . $dirsubfolder . 'php/findmarkers.php'); ?>

<div style="padding-top: 5%; padding-bottom: 5%;">
<div class="container-fluid">
<div class="row-fluid">
  <div class="span3 container hero-unit">
  <h2 style="text-align: center;">Route <?php echo $gRouteNumber ?></h2>
  <h4 style="text-align: center;" class="alert-info">Begins <? echo $gArrivalTime; ?></h4>
  <br />

  <table id="listOfStops" class="table table-striped">
  <thead>
  <tr>
    <th>Stop #</th>
    <th>Street Name</th>
  </tr>
  </thead>
  <tbody>
  <?php
  $i = 0;
  while($stmt -> fetch()) {
    echo '<tr  id="' . $i . '">';
    echo '<td>' . $gStopNumber . '</td>';
    echo '<td>' . $gStreetName . '</td>';
    echo '</tr>';
  $i++;} $stmt -> close(); $mysqli -> close(); ?>  
  </tbody>
  </table>




  </div>

<div class="span9">
<div id="gmaps"></div>
</div>
</div>
</div>
</div>




<?php
require_once('footer.php');
?>
4

1 に答える 1

1

コメントで既に述べたようにarrMarkers、関数内でローカル変数として宣言していますdocument ready。

つまり、それは関数undefinedにあります。setMarker

それをグローバル変数にしてみてください。うまくいくはずです。

于 2013-03-07T05:50:40.247 に答える