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

David

Člen

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('singleclick', 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

David

Člen

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

Neaktivní uživatel

Člen

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_info[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

David

Člen

David:13.4.2020 14:32

Díky, ale
Notice: Undefined index: info in C:\xampp\htdocs\pokus_do_itnetwork\get_coordinates.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

Neaktivní uživatel

Člen

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

David

Člen

David:13.4.2020 15:18

Jo, to jsem přehlédl.

Nahoru Odpovědět

13.4.2020 15:18

David

Člen

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('singleclick', 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

David

Člen

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

Neaktivní uživatel

Člen

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í

Nahoru Odpovědět

14.4.2020 21:30

Neaktivní uživatelský účet