0

この情報を MySQL テーブルから取得し、必要なものを表示できますが、現在のコードを使用してこのデータを 5 秒ごとに更新する方法について助けてください。

いつでも 5 つまたは 8 つのマーカーがあるように、表示するデータは多くありません。データをプルするために使用する現在のコードを含めました。私は PHP/MySQL にはある程度慣れていますが、Google マップは初めてです。 

<script type='text/javascript'>
//This javascript will load when the page loads.
jQuery(document).ready( function($){

        //Initialize the Google Maps
        var geocoder;
        var map;
        var markersArray = [];
        var infos = [];

        geocoder = new google.maps.Geocoder();
        var myOptions = {
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        //Load the Map into the map_canvas div
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        //Initialize a variable that the auto-size the map to whatever you are plotting
        var bounds = new google.maps.LatLngBounds();

        //Initialize the encoded string       
        var encodedString;

        //Initialize the array that will hold the contents of the split string
        var stringArray = [];

        //Get the value of the encoded string from the hidden input
        encodedString = document.getElementById("encodedString").value;

        //Split the encoded string into an array the separates each location
        stringArray = encodedString.split("****");

        var x;
     for (x = 0; x < stringArray.length; x = x + 1)
        {
            var addressDetails = [];
            var marker;
            //Separate each field
            addressDetails = stringArray[x].split("&&&");
            //Load the lat, long data
            var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
            var image = new google.maps.MarkerImage(addressDetails[3]);

            //Create a new marker and info window
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: lat,
                content: addressDetails[0]
            });



            //Pushing the markers into an array so that it's easier to manage them
            markersArray.push(marker);
            google.maps.event.addListener( marker, 'click', function () {
                closeInfos();
                var info = new google.maps.InfoWindow({content: this.content});
                //On click the map will load the info window
                info.open(map,this);
                infos[0]=info;
            });




           //Extends the boundaries of the map to include this new location
           bounds.extend(lat);
        }
        //Takes all the lat, longs in the bounds variable and autosizes the map
        map.fitBounds(bounds);



        //Manages the info windows
        function closeInfos(){
       if(infos.length > 0){
          infos[0].set("marker",null);
          infos[0].close();
          infos.length = 0;
       }
        }

});
</script>

</head>
<body>
<div id='input'>

    <?php


    //Initialize your first couple variables
    $encodedString = ""; //This is the string that will hold all your location data
    $x = 0; //This is a trigger to keep the string tidy

    //Now we do a simple query to the database

    // DB  INFO CONNECTION IS HERE AND WORKS

    $result = mysql_query("SELECT * FROM `ulocation` WHERE `ul_lat`!='' AND `ul_long`!='' AND `ul_onduty`='1'",$db1);

    //Multiple rows are returned
    while ($row = mysql_fetch_array($result, MYSQL_NUM))
    {
        //This is to keep an empty first or last line from forming, when the string is split
        if ( $x == 0 )
        {
             $separator = "";
        }
        else
        {
             //Each row in the database is separated in the string by four *'s
             $separator = "****";
        }
        $status='0';
        $cadd  = sql::getval('cal_address', 'call', "WHERE    `cal_id`='$row[14]'");
        $num  = sql::getval('cal_num', 'call', "WHERE `cal_id`='$row[14]'");
        $pcond  = sql::getval('cal_pcond', 'call', "WHERE `cal_id`='$row[14]'");
        $list="$num $cadd";
        //Saving to the String, each variable is separated by three &'s
        $encodedString = $encodedString.$separator.
        "<table border=0 width='350' height='20' class='maincolm' cellpadding=0   cellspacing=0><td align=left valign=top><h2></h2></td><tr><td width=100%><font size=3  face=arial><p><b>".$row[2].
        "</b>".
        "<br>Address: $list".
        "<br>Call Type: $pcond".
        "<br><br>Lat: ".$row[5].
        "<br>Long: ".$row[6].
        "</td></table>".
        "</p>&&&".$row[5]."&&&".$row[6]."&&&".$row[8]."&&&".$row[14];
        $x = $x + 1;
    }        
    ?>

    <input type="hidden" id="encodedString" name="encodedString" value="<?php echo   $encodedString; ?>" />




  <? echo "<body oncontextmenu=\"return false\" style=\"overflow: hidden; \"   topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>";


  <div id=\"map_canvas\"></div>
  </body>
  </html>";

  ?>

4

1 に答える 1

0 
setInterval(function() {
  $.ajax({ url: '/my/site',
     data: {action: 'test'},
     type: 'post',
      success: function(output) {
         // change the DOM with your new output info
      }
  });
}, 300000);

これにより、5分ごとに必要な投稿データを使用して、必要なページへのajax呼び出しが実行されます。

より明確にするために：

これを行う PHP ページがあるとrefreshComments.phpします。

$result = mysql_query("SELECT * FROM `comments` WHERE `articleId` = $_POST['articleId']");
while($data = mysql_fetch_array($result)) {
    $output[] = $data;
}
echo json_encode($output);

これが行っていることは、その単純なクエリを実行し、それをJSON オブジェクトに出力することです

私たちの Javascript には、これを行うというページがありますscripts.js。

setInterval(function() {
  $.ajax({ url: 'refreshComments.php',
   data: {articleId: '2'},
   type: 'post',
    success: function(output) {
      // dynamically append new comments
      console.log(output); // this just logs is
    }
  });
}, 300000);

この JS ファイルは何をしているのですか? 300000 ミリ秒 (または 5 分) の間隔で、refreshComments.php に ajax リクエストを送信します。refreshComments.php は新しいデータの JSON で応答し、success() 関数でその新しいデータを使用します。

于 2013-09-18T04:05:52.817 に答える