OpenLayers - jak ukázat popup informační okno po kliknutí na marker? – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

OpenLayers - jak ukázat popup informační okno po kliknutí na marker? – JavaScript, AJAX, jQuery – Fórum – Programujte.comOpenLayers - jak ukázat popup informační okno po kliknutí na marker? – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

8. 4. 2020   #1
-
0
-

Ahoj. Mám zde kód se dvěma marker ikonami, Chtěl bych aby se mi po kliknutí na nějaký marker ukázalo "popup" okno s informacemi jako třeba zde. Ze stránky jsem vzal část kódu, který jsem myslel že dělá zobrazení popup a dal ho do svého kódu. Tento kód zde uvádím. Popup se mi ale nezobrazuje. Zkoušel jsem i toto (popup.html a popup.js). Jenže když zpustím čistě tento kód, zobrazí pouze mapu ale ne již žádný marker nebo popup po kliknutí. Takže bych byl rád, když byste mi pomohli v mém kódu přepsat popup funkci. Díky

index.html

<!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:80%;
   height:600px;
   margin: 10px;
  }

 </style>
 <!--Basic styling for map div, 
 if height is not defined the div will show up with 0 px height  --></head>
<body>

 <center>   
 <div id="map">
  <div id="popup"></div>
 </div>
 </center>
 <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
 <!-- Openlayesr JS fIle -->
 <script type="text/javascript" src="map_index.js" type="text/javascript"></script>
 <!-- Our map file -->

 </body>
</html>

index.js (Zatím nefunguje popup okno)

*Pokud byste věděli, jak mi s tou funkcí pomoct, odstraňte tu stávající funkci a vepište místo ní váš kód.

var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var map = new ol.Map({
  target: 'map',
  layers: [ baseMapLayer],
  view: new ol.View({
      center: ol.proj.fromLonLat([-74.0061,40.712]), 
          zoom: 12 //Initial Zoom Level
        })
});

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

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

marker.setStyle(new ol.style.Style({
  image: new ol.style.Icon( ({
    color: '#ffcd46',
    crossOrigin: 'anonymous',
    src: 'dot.png'
  }))
}));

marker2.setStyle(new ol.style.Style({
  image: new ol.style.Icon( ({
    color: '#cdff46',
    crossOrigin: 'anonymous',
    src: 'dot.png'
  }))
}));

//funkce pro zobrazení popup okna odsud
      map.on('singleclick', function(evt) {
        var name = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
          return 'Hello world';

        })

          container.style.display="block";
          var coordinate = evt.coordinate;
          content.innerHTML = "Hello";
          overlay.setPosition(coordinate);


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



var vectorSource = new ol.source.Vector({
  features: [marker, marker2]
});

var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
});  
map.addLayer(markerVectorLayer);
Nahlásit jako SPAM
IP: 94.113.172.–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 10 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý