|
I have a web site to load the images with GPS exif information and add the markers on the google map to generate the routes. I have a routes consisted with 88 images which means need to read the 88 record from the mysql database. the sql is like select lat,lng, item_name, Originaldatetime, image_path,street_name from maps where map_id=xxxx order by UTC. At beging, I mixed up the php code to read all records from the mysql table with while loop and the javascript to show the maps together. The page stacked in blank page waiting the php to read all the records from the table. To improve the user experience, I taken away to code the read the data from the mysql db, and leave the javascript only looks after rendering the maps and html elements. php script do all the heavy lifting job by connect to the db and read all the data from table and read all record into arrays in while loop. once it array generated, header("Content-type:application/json"); $myjson = fopen("maps/$user/$map_id.json", "w") or die("Unable to open file!"); fwrite($myjson, json_encode(array($arrLat,$arrLng,$arrDT,$arrTimeDiff,$arrSPD,$full_path,$arr_item_name,$width,$height,$arr_street))); fclose($myjson); php has export the arrays into json encoder in 2 way, firstly, it echo to the javascript ,2ndly, it export the json file on the server disk. This provide the options on how javascipt the read the json data. In javascript: 1. //$.getJSON('map_data.php?map_id='+map_id, function (data) { 2. $.getJSON('maps/1511215176230503.json', function (data) { 2 ways to read the json data, 1st option is simply wait for respond from the php to read all the data from the mysql db, and loop through each element of the json file. 2ndly, read the json from the json file which is pre generated by php code. to read data from the table cost around 7018 ms while read from json file is 328 ms. It suggested that developer need to export json to files read from my sql data. the benefit is if you need to read the json data more than once, only the first read need to consume a lot of time. It improve the user experience. 有图有真相 |
