Diskuze: Jak do mapy: Openlayers přidat více marker icon ze seznamu v php?

David

Člen

David:4.4.2020 23:30

Ahoj, chtěl bych přidat více markerů na mapu.
(Z phpmyadmin postupně přidám ze seznamu a potom do kódu. (Získání dat z php funguje bez problému, proto se tím zde nezabývám a interpretuji ho jako $array1.)

Mám zde však dva problémy.
První problém: cyklus
Tato část kódu

"<?php echo $array1["+i+"]; ?>"

by měla vrátit souřadnici z kódu s aktuálním indexem. Ale bohužel to takto nejde napsat.
Když však místo toho dám index pevně daný, jako zde

"<?php echo $array1[1]; ?>"

, běží to správně.
Takže jak mohu vrátit aktuální člen ze seznamu php pomocí javascriptu?

<?php $array1 = array("-74.0061,40.712", "40.712,40.712", "19.291,50.712"); ?>
<script>
    for (i = 0; i != "<?php echo count($array1); ?>"; i++) {
                                        //there
        var from_array = "<?php echo $array1["+i+"]; ?>";
        document.getElementById(i).innerHTML = from_array;
    }
</script>

Druhý problém: chci uvést souřadnici jako proměnnou
Tento kód navazuje na předchozí. Za předpokladu že by se povedlo vybrat aktuální souřadnice ze seznamu,
zde bude tato souřadnice přetypována na int. Potom bude dosazena místo souřadnice (viz poslední řádek).
Pro zkoušku jsem to udělal s jinou int proměnnou nazvanou integ a ani to mi nefunguje.
Jak tedy můžu do posledního řádku dosadit souřadnice z int proměnné?

A ještě jedna třetí věc: u var maker potřebuji, aby měl marker samozřejmě vždy jinou hodnotu, tedy marker + i (tedy např. marker2, marker3 atd). To mi v kódu pochopitelně taky nefunguje.
Měli byste někdo představu jak toto provést?

var integ= -74.006,40.7127;
for (i = 0; i != "<?php echo count($array1); ?>"; i++) {
        var from_array = "<?php echo $array1["+i+"]; ?>";
        var intig = parseInt(from_array);

        var marker[i] = new ol.Feature({
        geometry: new ol.geom.Point(
        ol.proj.fromLonLat([integ])  //there was ol.proj.fromLonLat([-74.006,40.7127])
     ),                                 // Cordinates of New York's City Hall
});

Pokud znáte jiný - jednodušší způsob jak ty marker ikony do této mapy přidat můžete mi napsat i ten. Díky za pomoc.

Editováno 4.4.2020 23:32

Odpovědět

4.4.2020 23:30

Neaktivní uživatel

Člen

Neaktivní uživatel:5.4.2020 10:10

Ahoj, ty jsi mi po ránu dal zabrat. Takže kde začít? Je toho hodně, čili stručně po bodech.

0a Pokud si v DB ukládáš a vracíš souřadnice v podobě "-74.0061,40.712", tak prvního problému se dopouštíš už v návrhu. Udělej si dva databázové sloupce. Jeden pro latitude a druhý pro longtitude. Jednak tím zajistíš přehlednost a jednoznačnost dat a taky můžeš nad DB dělat propočty typu "Všechny body v okruhu X kilometrů od souřadnic A, B".

0b Je to vyzobané z tutoriálu na webu, tak by pro kontext nevadilo, kdybys příště dal i odkaz na zdroj, kde jsi k tomu kódu přišel.

1 PHP se provádí a jeho výstupy vypisují před/při odesláním stránky do prohlížeče. JS provádíš až u klienta, tak se z jeho cyklu takto nemůžeš doptávat na proměnné PHP. Vše si v PHP připrav a pošli jako JS data.

<?php

  $list = [];
  $coords = ['-74.0061,40.712', '40.712,40.712', '19.291,50.712'];
  foreach($coords as $item) {
    list($lng, $lat) = explode(',', $item);
    $list[] = ['lng' => $lng, 'lat' => $lat];
  }

?>
<script>
  window.phpdata = {};
  Object.defineProperty(window.phpdata, "markers", {value: <?php echo !empty($list) ? json_encode($list) : 'null'; ?>, writable: false, configurable: false});
</script>

2 Integer je celočíselný datový typ. Žádná desetinná místa, žádná dvě čísla oddělená čárkou. Ty potřebuješ definovat dva parametry desetinného čísla.

3 Číslo v názvu proměnné tady nepotřebuješ. Více markerů se v OpenLayers dělá jiným způsobem. Ty tu proměnnou potřebuješ jen po dobu jeho nastavení (ikona, barva, akce atd.). Pak ji můžeš přepsat dalším markerem.

No a pokud jsi to dočetl až sem, tak přikládám ukázku fungující implementace https://jsfiddle.net/v6gLbhwo/

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

5.4.2020 10:10

Neaktivní uživatelský účet

David

Člen

David:5.4.2020 14:37

Aha, to je dobré řešení. S tím kódem z odkazu a ten Object.defineProperty s pevně danými souřadnicemi mi to funguje, ale když ho nahradím tím co máš zde v náhledu, který čerpá hodnoty ze seznamu, tak se mi markery nezobrazí. (Z php to bere správně, to jsem testoval.)
(Ten object s fixními hodnotami mám zakomentářovaný a pod ním aktivní ten co čerpá).
Tentokrát zde uvedu celý kód:

<!DOCTYPE html>
<html>
<head>
 <title>Working with Openlayers</title>
 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
 <!-- Openlayers CSS file-->

 <style type="text/css">
  #map{
   width:100%;
   height:600px;
  }
 </style>
 <!--Basic styling for map div,
 if height is not defined the div will show up with 0 px height  --></head>
<body>
<?php
$conn = mysqli_connect("localhost", "root", "", "lokace");
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT souradnice FROM tabulka_lokace";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row

$coords= array();
$variable = "";
while($name = $result->fetch_assoc()) {
    array_push($coords, $name["souradnice"]."<br>");
    $variable = $variable.$name["souradnice"].",";
}


} else { echo "0 results"; }


  $list = [];
  //$coords = ['-74.0061,40.712', '40.712,40.712', '19.291,50.712'];
  foreach($coords as $item) {
    list($lng, $lat) = explode(',', $item);
    $list[] = ['lng' => $lng, 'lat' => $lat];
  }

$conn->close();
?>


 <div id="map">
 </div>
</body>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

 <script>
  window.phpdata = {};

  //Object.defineProperty(window.phpdata, "markers", {value: [{"lng":"-74.0061","lat":"40.712"},{"lng":"40.712","lat":"40.712"},{"lng":"19.291","lat":"50.712"}], writable: false, configurable: false});
    Object.defineProperty(window.phpdata, "markers", {value: <?php echo !empty($list) ? json_encode($list) : 'null'; ?>, writable: false, configurable: false});
var base = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

var map = new ol.Map({
        target: 'map',
        layers: [base],
        view: new ol.View({
                center: ol.proj.fromLonLat([-74.0061,40.712]), zoom: 2
        })
});

var vectors = new ol.source.Vector({});

if(window.phpdata.markers && window.phpdata.markers.length > 0) {
        var data = window.phpdata.markers;
  for(var i = 0; i < data.length; i++) {
        var marker = new ol.Feature({
                geometry: new ol.geom.Point(
                ol.proj.fromLonLat([Number(data[i].lng), Number(data[i].lat)])
                ),
                });

                marker.setStyle(new ol.style.Style({
                image: new ol.style.Icon(({
                src: 'https://raw.githubusercontent.com/itsmohitt/openlayers-tutorials/master/dot.png'
                }))
                }));

                vectors.addFeature(marker);
        }

        var layer = new ol.layer.Vector({
        source: vectors,
        });

        map.addLayer(layer);
}
 </script>
</html>

Nahoru Odpovědět

5.4.2020 14:37

Neaktivní uživatel

Člen

Neaktivní uživatel:5.4.2020 15:03

Nevím, co jsi testoval, ale už tady vidím první chybu, kdy do toho mícháš html tagy, takže ten výstup správně být nemůže.

array_push($coords, $name["souradnice"]."<br>");

Udělej po naplnění var_dump pro $coords. Nebo ještě lépe otevři konzoli a udělej výpis console.table(window.phpdata.markers). A pokud výpis nevypadá strukturálně jako v příloze, tak si tu kontrolu udělej pořádně znovu.

Nahoru Odpovědět

5.4.2020 15:03

Neaktivní uživatelský účet

David

Člen

David:5.4.2020 15:38

Jo, chyba byla v tom <br>. Předtím jsem to totiž testoval jsen jako výpis položek ze seznamu $coords nikoliv $list.
Díky

Nahoru Odpovědět

5.4.2020 15:38

David

Člen

David:5.4.2020 15:47

*chyba byla v tom br

Editováno 5.4.2020 15:47

Nahoru Odpovědět

5.4.2020 15:47

Neaktivní uživatel

Člen

Neaktivní uživatel:5.4.2020 15:52

Super, tak si to ještě trochu učeš. Máš to zbytečně roztahané do dvou cyklů.

$result = $conn->query($sql);
$list = [];
if ($result->num_rows > 0) {
  while($name = $result->fetch_assoc()) {
    list($lng, $lat) = explode(',', $name['souradnice']);
    $list[] = ['lng' => $lng, 'lat' => $lat];
  }
} else {
  echo '0 results';
}

$conn->close();

Nahoru Odpovědět

5.4.2020 15:52

Neaktivní uživatelský účet