NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Jak přiřadit více text k markeru a ukázat ho po kliknutí

V předchozím kvízu, Online test znalostí PHP, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
David
Člen
Avatar
David:12.4.2020 23:22

Zdravím,
Můj problém spočívá v tom, že bych chtěl vzít text z databáze phpmyadmin a přiřadit ho k jednotlivým markerům na mapě
a po kliknutí na některý z nich bych chtěl ukázat příslušný text v <p> vedle mapy.

Mapu i s načtenými markery už mám. Vychází "odsud ":https://www.itnetwork.cz/…fc6f17f90Pro úplnost vysvětlím co to dělá.

get_coordinates :
Stránka se připojí k databázi (testuji přes xampp) a postupně přiřadí do seznamu všechny souřadnice s hodnotami Long a Lat.

index.html:
řádek: 41 ...do windows.php přířadí seznam $list a každou souřadnici zde definuje jako marker.
řádek: 59 ...vytvoří proměnnou data.
řádek: 64 ... vrátí souřadnici s indexem [i]. Dále na jednotlivých místech vytvoří marker: dot.png

Vše ostatní pouze vytváří podobu mapy nebo dělá věci, které se nedají využít k tomu, čeho bych chtěl dosáhnout.

Nyní bych tedy potřeboval udělat něco podobného se sloupcem info ve stejné tabulce - po kliknutí na marker se vedle v paragrafu(<p>) ukáže příslušný text z databáze,který markeru náleží.

Funkční kód, který ale pouze zobrazuje markery je v index.php.

První věc kterou nevím jak vytvořit je druhý list v get_coordinates, který by fungoval stejně jen s hodnotou sloupce "info" viz zakomentářovaný kód v get_coordinates­.php.

Pokusil jsem se funkci na ukázání informací po kliknutí na marker vytvořit podle kódu na souřadnice, jen s výjimkou, že po jejich přiřazení do seznamu bude výsledek ve funkci map.on('single­click', function (event) {.
To mám v kódu index_pokus.php
Ten ale nefunguje. Věděli byste jak to udělat? Díky za pomoc (je to poslední takto obsáhlá věc :-D

index.php (po kliknutí na marker se nic nestane, pokud mi budete chtít pomoct, můžete vycházet z tohoto)

<!DOCTYPE html>
<html>
<head>
 <title>Working with Openlayers</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
 <!-- Openlayers CSS file-->

 <style type="text/css">
   body{
    margin:0;
    padding:0;
    background:#fff;
  }

  #map{
   width:60%;
   height:600px;
  }
 </style>
</head>
<body>


<p id="www"></p>
<p id="pinfo"> </p> &nbsp; info z database o danem markeru  <br>  <br>

<?php include 'get_coordinates.php';?>


 <div id="map">
 </div>
</body>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" ></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}); //ř41


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;      //59

  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)])    //64

                ),
                });
        console.log(data);

                marker.setStyle(new ol.style.Style({
                image: new ol.style.Icon(({
                src: 'dot.png'
                }))
                }));

                vectors.addFeature(marker);

        }

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

        map.addLayer(layer);
}




 map.on('singleclick', function (event) {
     if (map.hasFeatureAtPixel(event.pixel) === true) {
         document.getElementById("www").innerHTML="Hello World!";


     } else {
         overlay.setPosition(undefined);
         closer.blur();
     }
 });


map.on('pointermove', function(evt) {
    map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});


//console.table(window.phpdata.markers)
 </script>
</html>

index_pokus.php(vychá­zí z index.php Pokoušel jsem se zde obdobným způsobem vytáhnout informace ze sloupce info a přiřadit je k markerům se stejným indexem. Po kliknutí by se měly ukázat, zatím se mi však ukazuje jen testovací "Hello World!". Chyba je prý na řádku 40 a tedy už tam nejsou nahrána žádná data.)

<!DOCTYPE html>
<html>
<head>
 <title>Working with Openlayers</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
 <!-- Openlayers CSS file-->

 <style type="text/css">
   body{
    margin:0;
    padding:0;
    background:#fff;
  }


  #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>


<p id="www"></p> &nbsp; zkouska hello worl dpo kliknuti na mapu <br> <br>
<p id="pinfo"> </p> &nbsp; info z database o danem markeru  <br>  <br>

<?php include 'get_coordinates.php';?>


 <div id="map">
 </div>
</body>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js" type="text/javascript"></script>

 <script>

    window.phpdata = {};
    window.phpdata_info = {};   //ř40

  //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});
    Object.defineProperty(window.phpdata, "markers_info", {value: <?php echo !empty($list_info) ? json_encode($list_info) : '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;
    var data_info = window.phpdata_info.markers_info;
  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: 'dot.png'
                }))
                }));

                vectors.addFeature(marker);

     var myinfo = Number(data_info[i].info);

        }


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

        map.addLayer(layer);
}




map.on('singleclick', function (event) {
     if (map.hasFeatureAtPixel(event.pixel) === true) {
         document.getElementById("www").innerHTML="Hello World!";

        const const_info = event.const_info;
        const contact_text = `${const_info}`;
        document.getElementById('pinfo').innerText =  contact_text;
     } else {
         overlay.setPosition(undefined);
         closer.blur();
     }
 });


map.on('pointermove', function(evt) {
    map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});


console.table(window.phpdata.markers)
 </script>
</html>

get_coordinates­.php(připojení k databázi a export dat ze sloupců: "souradnice" a "info")

<?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);
$variable="";
$list = [];
if ($result->num_rows > 0) {
    while($name = $result->fetch_assoc()) {
        list($lng, $lat) = explode(',', $name['souradnice']);
        $list[] = ['lng' => $lng, 'lat' => $lat];
        list($info) = $name['info'];
        $list_info[] = ['info' => $info];
           }


} else { echo "0 results"; }


$conn->close();
?>
 
Odpovědět
12.4.2020 23:22
Avatar
David
Člen
Avatar
David:12.4.2020 23:28

V tom get coordinates nic zakomentářované nemám, ale myslel jsem jestli toto mohu napsa i přes to, že tam jeden list už je:

list($info) = $name['info'];
$list_info[] = ['info' => $info];
 
Nahoru Odpovědět
12.4.2020 23:28
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:13.4.2020 11:02

Ahoj, udělej normálně

list($lng, $lat) = explode(',', $name['souradnice']);
$list[] = ['lng' => $lng, 'lat' => $lat, 'info' => $name['info']];

a budeš to mít uložené ve stejné proměnné a tím i ve stejném JS objektu. Ty funkce list() a explode() jsou tam jen proto, že si souřadnice ukládáš společně v jednom sloupečku. Kdybys to po minulém dotazu opravil a rozdělil je, nemuselo by to tam být vůbec.

Jelikož řešíš víc markerů a jejich popisy, měl bys to chování definovat během cyklu pro každý z nich a ne až za ním. Hodnota bude v cyklu dostupná klasicky jako data[i].info.

Jinak pevně doufám, že tohle nemyslíš vážně Number(data_in­fo[i].info). Nebo je snad info číselná hodnota, abys z ní dělal typově číslo?! Chce to víc koukat na dokumentaci a orientovat se v základech, ne to jen nahodile mezi sebou kopírovat.

Nahoru Odpovědět
13.4.2020 11:02
Neaktivní uživatelský účet
Avatar
David
Člen
Avatar
David:13.4.2020 14:32

Díky, ale
Notice: Undefined index: info in C:\xampp\htdoc­s\pokus_do_it­network\get_co­ordinates.php on line 14

<?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);
$variable="";
$list = [];
if ($result->num_rows > 0) {
    while($name = $result->fetch_assoc()) {
        list($lng, $lat) = explode(',', $name['souradnice']);
        $list[] = ['lng' => $lng, 'lat' => $lat, 'info' => $name['info']];

           }


} else { echo "0 results"; }


$conn->close();
?>
 
Nahoru Odpovědět
13.4.2020 14:32
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na David
Neaktivní uživatel:13.4.2020 14:57

A to jsou ty scházející základy, o kterých mluvím. Když máš undefined index info, tak tam žádné info asi není načtené.

SELECT souradnice, info FROM tabulka_lokace
Nahoru Odpovědět
13.4.2020 14:57
Neaktivní uživatelský účet
Avatar
David
Člen
Avatar
David:13.4.2020 15:18

Jo, to jsem přehlédl.

 
Nahoru Odpovědět
13.4.2020 15:18
Avatar
David
Člen
Avatar
David:13.4.2020 16:07

Ty hodnoty z info to teď vrací, jenže ne příslušné, vrátí to tu poslední. Vím že tuto funkci

map.on('singleclick', function (event) {
                     if (map.hasFeatureAtPixel(event.pixel) === true) {
                        document.getElementById("www").innerHTML=informations;

                     } else {
                         overlay.setPosition(undefined);
                         closer.blur();
                     }
                 });

musím napsat až po

map.addLayer(layer);

protože to s tou map pracuje, zároveň by to ale mělo být ještě vrámci cyklu. Ale když to nefunguje v místě kde to je, tak nevím kde by to mělo být.... Kam to map.on('single­click', function (event) {... teda posunout?

if(window.phpdata.markers && window.phpdata.markers.length > 0) {
        var data = window.phpdata.markers;

  for(var i = 0; i < data.length; i++) {
      var informations = data[i].info;



        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: 'dot.png'
                }))
                }));

                vectors.addFeature(marker);

                map.on('singleclick', function (event) {
                     if (map.hasFeatureAtPixel(event.pixel) === true) {
                        document.getElementById("www").innerHTML=informations;
                     } else {
                         overlay.setPosition(undefined);
                         closer.blur();
                     }
                 });

        }

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

        map.addLayer(layer);
}


document.getElementById('myposition').innerText = "click to map and get coordinates here";
map.on('singleclick', event => {
  const coordinate = ol.proj.toLonLat(event.coordinate);
  //const innerText = `Lon: ${coordinate[0].toFixed(4)}, Lat: ${coordinate[1].toFixed(4)}`;
  const innerText = `${coordinate[0].toFixed(4)}, ${coordinate[1].toFixed(4)}`;
  document.getElementById('myposition').innerText = innerText;
});


map.on('pointermove', function(evt) {
    map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});


console.table(window.phpdata.markers)
 
Nahoru Odpovědět
13.4.2020 16:07
Avatar
David
Člen
Avatar
David:14.4.2020 9:37

Napadlo mě změnit

map.on('singleclick', function (event) {

na

marker.on('singleclick', function (event) {

Smysl by to už podle mně dávalo.
Markery se zobrazí, běží funkce na zobrazení souřadnic ale po kliknutí na marker iconu nic...

 
Nahoru Odpovědět
14.4.2020 9:37
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:14.4.2020 21:30

Tak jsem si našel chvilku a podíval se na to. Tady je výsledek https://jsfiddle.net/pwjt1nq4/

Pozor, je to psané proti aktuálním knihovnám OpenLayer, takže tam oproti knihovně ze staršího návodu nemusí být kompatibilita. Jinak musím říct, že takhle ukecané mapové API jsem ještě nepotkal a u většího projektu bych dlouho přemýšlel, zda raději neplatit Google Maps API.

Akceptované řešení
+20 Zkušeností
Řešení problému
Nahoru Odpovědět
14.4.2020 21:30
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.