Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][MySQL][PHP] Markery z bazy danych na mapie OpenStreetMaps Leaflet
Forum PHP.pl > Forum > Przedszkole
brzanek
14.06.2019, 14:48:36
Witam mam problem z zaimportowaniem danych o markerach z bazy danych mysql na mapie OpenStreetMaps Leaflet
Do tej pory zrobiłem tak, że z bazy danych pobieram współrzędne markerów i wstawiam je do tablicy.
Potem mam mapę ale jak dodać te markery?
Tak wygląda kod.
[PHP] pobierz, plaintext 
  1. <?
  2. ?>
  3.  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  4.    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9
    wQ=="
  5.    crossorigin=""/>
  6.  <!-- Make sure you put this AFTER Leaflet's CSS -->
  7.  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  8.    integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  9.    crossorigin=""></script>
  10. <?
  11. require('db.php');
  12.  
  13. $data=date("Y-m-d H:i");
  14. $dwadziecia = date('Y-m-d H:i', strtotime("-20 minutes"));
  15. $czterdziesci = date('Y-m-d H:i', strtotime("-40 minutes"));
  16. $szecdziesiac = date('Y-m-d H:i', strtotime("-60 minutes"));
  17. $osiemdziesiat = date('Y-m-d H:i', strtotime("-80 minutes"));
  18. $sto = date('Y-m-d H:i', strtotime("-100 minutes"));
  19. $stodwadziescia = date('Y-m-d H:i', strtotime("-120 minutes"));
  20.  
  21. echo "Teraz: $data";
  22. echo '<br>';
  23. echo "teraz / -20 minut: $dwadziecia";
  24. echo '<br>';
  25. echo '<br>';
  26. echo "-20 / -40 minut: $czterdziesci";
  27. echo '<br>';
  28.  
  29.  
  30. //tablica
  31. $result = $mysqli->query("SELECT time, lat, lon FROM mybo_strikes WHERE `time` BETWEEN '".$dwadziecia."' AND '".$data."'  AND `lat` BETWEEN 48.571000 AND 55.622000 AND `lon` BETWEEN 10.121000 AND 27.983000 ORDER BY `time` DESC");
  32. $data = array();
  33.     	echo "var planes = [";
  34.  
  35.         for ($x = 0; $x < mysqli_num_rows($result); $x++) {
  36.             $data[] = mysqli_fetch_assoc($result);
  37.             echo "[",$data[$x]['lat'],",",$data[$x]['lon'],"]";
  38.             if ($x <= (mysqli_num_rows($result)-2) ) {
  39.     			echo ",";
  40.     		}
  41.         }
  42. echo "];";
  43. // mapa
  44. echo '<div id="mapid" style="width: 1000px; height: 500px;"></div>';
  45. ?>
  46. <script>
  47.  
  48. 	var mymap = L.map('mapid').setView([53.48, 15.46], 5);
  49.  
  50. 	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.r
    JcFIG214AriISLbB6B5aw', {
  51. 		maxZoom: 18,
  52. 		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  53. 			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  54. 			'Imagery Š <a href="https://www.mapbox.com/">Mapbox</a>',
  55. 		id: 'mapbox.dark'
  56. 	}).addTo(mymap);
  57.  
  58. 	//L.marker([53.5, 15.09]).addTo(mymap);
  59.  
  60. //ikony
  61. var bialy = L.icon({
  62.     iconUrl: 'http://brzanek.webd.pl/2019/czas/images/00.png',
  63.     iconSize:     [7, 7], // size of the icon
  64. });
  65. var zulty = L.icon({
  66.     iconUrl: 'http://brzanek.webd.pl/2019/czas/images/20.png',
  67.     iconSize:     [7, 7], // size of the icon
  68. });
  69. var pomaranczowy = L.icon({
  70.     iconUrl: 'http://brzanek.webd.pl/2019/czas/images/40.png',
  71.     iconSize:     [7, 7], // size of the icon
  72. });
  73. //var twojazmienna = $("").val();
  74.  
  75. L.marker([49.053873, 17.030497], {icon: bialy}).addTo(mymap);
  76. //L.marker([53.5, 13.09], {icon: bialy}).addTo(mymap).bindPopup("I am a green leaf.");
  77. //L.marker([53.5, 14.09], {icon: zulty}).addTo(mymap).bindPopup("I am a green leaf.");
  78. //L.marker([54.5, 14.09], {icon: pomaranczowy}).addTo(mymap).bindPopup("I am a green leaf.");
  79. </script>
[PHP] pobierz, plaintext
tjakob
14.06.2019, 18:03:37
spróbuj po wywołaniu mapy dodać 
[PHP] pobierz, plaintext 
  1. 		for (var i = 0; i < planes.length; i++) {
  2. 			marker = new L.marker([planes[i][0],planes[i][1]])
  3. 			.addTo(map);
  4. 		}
[PHP] pobierz, plaintext

brzanek
14.06.2019, 20:04:14
Niestety nie działa.
tjakob
14.06.2019, 22:16:12
sorki
[PHP] pobierz, plaintext 
  1. 		for (var i = 0; i < planes.length; i++) {
  2. 			marker = new L.marker([planes[i][0],planes[i][1]])
  3. 			.addTo(mymap);
  4. 		}
[PHP] pobierz, plaintext


wczytanie z bazy wrzuć do skryptu mapy

[PHP] pobierz, plaintext 
  1. <div id="mapid" style="width: 1000px; height: 500px;"></div>
  2.  
  3.  <script>
  4.  
  5.  <?php
  6.  
  7.     $myquery = "SELECT  ......";
  8.     $query = mysql_query($myquery);
  9.  
  10.     if ( ! $query ) {
  11.         echo mysql_error();
  12.         die;
  13.     }
  14.  
  15.     $data = array();
  16.  
  17. 	echo "var planes = [";
  18.  
  19.     for ($x = 0; $x < mysql_num_rows($query); $x++) {
  20.         $data[] = mysql_fetch_assoc($query);
  21.         echo "[",$data[$x]['lat'],",",$data[$x]['lng'],"]";
  22.         if ($x <= (mysql_num_rows($query)-2) ) {
  23. 			echo ",";
  24. 		}
  25.     }
  26.  
  27.     	echo "];";
  28.  
  29.     mysql_close($server);
  30.  
  31. ?>
  32.  
  33.  
  34. 	var mymap = L.map('mapid').setView([53.48, 15.46], 5);
  35.  
  36. 	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.r
    JcFIG214AriISLbB6B5aw', {
  37. 		maxZoom: 18,
  38. 		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  39. 			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  40. 			'Imagery Š <a href="https://www.mapbox.com/">Mapbox</a>',
  41. 		id: 'mapbox.dark'
  42. 	}).addTo(mymap);
  43.  
  44.  
  45. 		for (var i = 0; i < planes.length; i++) {
  46. 			marker = new L.marker([planes[i][0],planes[i][1]])
  47. 			//	.bindPopup(planes[i][0])
  48. 				.addTo(mymap);
  49. 		}
  50.  
  51. </script>
  52.   sprawdź tylko na razie tą część pozostałe rzeczy pomiń, zobacz czy markery zostaną wczytane na mapę
[PHP] pobierz, plaintext
brzanek
18.06.2019, 05:27:57
Teraz zadziałało takim kodem
[PHP] pobierz, plaintext 
  1.  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  2.    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9
    wQ=="
  3.    crossorigin=""/>
  4.  <!-- Make sure you put this AFTER Leaflet's CSS -->
  5.  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  6.    integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  7.    crossorigin=""></script>
  8. <div id="mapid" style="width: 1000px; height: 500px;"></div>
  9.  
  10.  <script>
  11.  
  12.  <?php
  13. require('db.php');
  14.  
  15. $data=date("Y-m-d H:i");
  16. $dwadziecia = date('Y-m-d H:i', strtotime("-20 minutes"));
  17. $czterdziesci = date('Y-m-d H:i', strtotime("-40 minutes"));
  18. $szecdziesiac = date('Y-m-d H:i', strtotime("-60 minutes"));
  19. $osiemdziesiat = date('Y-m-d H:i', strtotime("-80 minutes"));
  20. $sto = date('Y-m-d H:i', strtotime("-100 minutes"));
  21. $stodwadziescia = date('Y-m-d H:i', strtotime("-120 minutes"));
  22.  
  23. $result = $mysqli->query("SELECT time, lat, lon FROM mybo_strikes WHERE `time` BETWEEN '".$dwadziecia."' AND '".$data."'  AND `lat` BETWEEN 48.571000 AND 55.622000 AND `lon` BETWEEN 10.121000 AND 27.983000 ORDER BY `time` DESC");
  24. $data = array();
  25.     	echo "var planes = [";
  26.  
  27.         for ($x = 0; $x < mysqli_num_rows($result); $x++) {
  28.             $data[] = mysqli_fetch_assoc($result);
  29.             echo "[",$data[$x]['lat'],",",$data[$x]['lon'],"]";
  30.             if ($x <= (mysqli_num_rows($result)-2) ) {
  31.     			echo ",";
  32.     		}
  33.         }
  34. echo "];";
  35.  
  36. ?>
  37.  
  38.  
  39. 	var mymap = L.map('mapid').setView([53.48, 15.46], 5);
  40.  
  41. 	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.r
    JcFIG214AriISLbB6B5aw', {
  42. 		maxZoom: 18,
  43. 		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  44. 			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  45. 			'Imagery Š <a href="https://www.mapbox.com/">Mapbox</a>',
  46. 		id: 'mapbox.dark'
  47. 	}).addTo(mymap);
  48.  
  49.  
  50. 		for (var i = 0; i < planes.length; i++) {
  51. 			marker = new L.marker([planes[i][0],planes[i][1]])
  52. 			//	.bindPopup(planes[i][0])
  53. 				.addTo(mymap);
  54. 		}
  55.  
  56. </script>
[PHP] pobierz, plaintext

Problem jest tylko taki, że strasznie długo to się wczytuje.
Można coś z tym zrobić?
Jak zamienić ten standardowy marker na coś zrobione w css np. zwykła kropka.

Teraz marker waży jakieś 1000B ale jak wczytuje się ponad 300 takich markerów to trochę to zaczyna ważyć. Jak mogę to poprawić?
Jak zastąpić ikonę markera jakimś znakiem napisanym w css - myślę że to by poprawiło działanie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.