- Bambu Lab 3D nyomtatók
- AMD Ryzen 9 / 7 / 5 7***(X) "Zen 4" (AM5)
- Multimédiás / PC-s hangfalszettek (2.0, 2.1, 5.1)
- Melyik a legerősebb Low Profile VGA kártya?
- Vezetékes FEJhallgatók
- Milyen processzort vegyek?
- Fájdalmasan gyenge kijelzőt válaszott a Switch 2-höz a Nintendo
- Hobby elektronika
- NVIDIA GeForce RTX 5070 / 5070 Ti (GB205 / 203)
- AMD Navi Radeon™ RX 9xxx sorozat
-
PROHARDVER!
JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)
Új hozzászólás Aktív témák
-
Sk8erPeter
nagyúr
válasz
bazsika33 #3783 üzenetére
Tudod, mi volt a gond?
Ez:var zoomLevelAttr = map_canvas.getAttribute('data-map-zoom-level');
var zoomLevel = (zoomLevelAttr)? zoomLevelAttr : 13;így önmagában hibátlan, DE ezt a hibát írja:
"Uncaught InvalidValueError: invalid argument to setZoom: 3 "
Az oka pedig az, hogy a zoomLevel string típusú lesz, miközben számot vár...
Ezért javítani kell így:var zoomLevel = (zoomLevelAttr)? parseInt(zoomLevelAttr, 10) : 13;
így már integerré konvertálja.
A Google Maps tesztelésénél a Google Maps scriptfájljainak betöltési módja miatt a jsFiddle-nél problémák tapasztalhatók, úgyhogy felraktam JS Binre:
http://jsbin.com/EzeBUTe/2/editA custom tooltip itt sem működik, de azzal nem foglalkoztam. De mivel írtad, hogy rájöttél, mi a baja, úgyhogy megoszthatnád.
-
Sk8erPeter
nagyúr
válasz
bazsika33 #3781 üzenetére
Konkrétan mit buheráltál a Tooltipen, mivel bírtad működésre?
"Még egy kérdés: nem lehetne h a 'lat' 'lng' mellett a zoom mértékét is a html-ben lehessen állítani?"
Az előző után már nem kéne, hogy túl nagy trouvaille legyenA HTML eddig így nézett ki:
<div id="map_canvas" style="width:100%; height:400px" data-map-center-lat="47.507121" data-map-center-lng="19.045669"></div>
helyette legyen PÉLDÁUL ilyen (a data-attribútumokat teljesen tetszőlegesen találhatod ki, a "data-map-center-lng és hasonló neveket én adtam csak hasraütésre! Lehetett volna akár data-pityipalko is!):
<div id="map_canvas" style="width:100%; height:400px" data-map-center-lat="47.507121" data-map-center-lng="19.045669" data-map-zoom-level="15"></div>
A JS-kódba pedig kerüljön bele mondjuk ezután a sor után:
var center_lng = map_canvas.getAttribute('data-map-center-lng');
ez:
var zoomLevelAttr = map_canvas.getAttribute('data-map-zoom-level');
var zoomLevel = (zoomLevelAttr)? zoomLevelAttr : 13;aztán
var mapOptions = {
..........
zoom: zoomLevel,
..........
};hasonlóan bármilyen adatot bedrótozhatsz így a HTML-kódba, csak valami hasonló sémát kövess.
Szerk.:
Itt még egy pár percig percig próbálkoztam életre kelteni a Tooltipet, azzal játszottam, hogy definiáltam egy eseménykezelőt a térkép load eventjére, meg bemásoltam egy az egyben a Tooltip kódját, beraktam az inherit(Tooltip, google.maps.OverlayView); részt az initialize() függvénybe, aztán sikerült elcseszerinteni a dolgot, és végül most itt nem működik a térkép, és rohadtul nem volt most kedvem, agyam energiám folytatniDe mintát vehetsz, itt benne van már a zoom-beállítás, csak náám múúkodik: http://jsfiddle.net/kxQw8/7/
-
Sk8erPeter
nagyúr
válasz
bazsika33 #3777 üzenetére
Itt beírtam, hogy "Parlament, Budapest", vagy "Országház", vagy " 1055 Budapest, Kossuth Lajos tér 1-3.", vagy ahogy épp rátalálsz, aztán alul a "Click to see this area on Google Maps"-nél kattints (láthatod fölévitellel az URL-t):
https://maps.google.com/maps?ll=47.507121,19.045669&z=17&t=m&hl=en-US&mapclient=apiv3
(vagy az új Google Maps új URL-je szerint:
https://www.google.com/maps/preview#!data=!1m4!1m3!1d4716!2d19.045669!3d47.507121
)természetesen ll=47.507121,19.045669 az érdekes. Ez a felhasználandó koordináta.
Ez alapján nézd meg a kódot jól, felhasználtam a map divjénél a data-attribútumokat, és a JavaScript-kódban is ezzel babráltam:
http://jsfiddle.net/kxQw8/4/Konkrétan:
HTML:
<div id="map_canvas" style="width:100%; height:400px" data-map-center-lat="47.507121" data-map-center-lng="19.045669"></div>JS:
var map_canvas = document.getElementById("map_canvas");
var center_lat = map_canvas.getAttribute('data-map-center-lat');
var center_lng = map_canvas.getAttribute('data-map-center-lng');
// ...Szerk.:
még annyi, hogy az általad felhasznált Tooltipes kód nem tudom, honnan származik, de hiányos, mivel exceptionöket dobál nem létező metódusok felhasználása miatt.
Rákerestem, hátha meglelem a forrását, akkor ezt találtam:
http://stackoverflow.com/questions/19383522/google-maps-api-v3-multiple-tooltips-with-custom-content
Ezt Te kérdezted meg? -
Sk8erPeter
nagyúr
válasz
bazsika33 #3774 üzenetére
Így már működik a példád:
http://jsfiddle.net/kxQw8/2/
De igazából csak működőképessé tettem jsFiddle-ön, érdemben nem módosítottam rajta."Tehgát: minden egyes markerhez a saját html oldalán a marker centerjét szeretném beállítani. Tehát pl. a parlament html-en a parlament marker-je legyen a térképem központja."
Annyira nem jó ötlet, hogy minden egyes helyszínhez újabb és újabb HTML-fájlokat hozol létre, mondjuk a 30. helyszínnél már el fogsz gondolkozni rajta, hogy biztos nincs-e egyszerűbb megoldás. Query stringbe kellene belerakni a helyszínek neveit."A js-be meg kell adni egy centert és így minden html-ben jelenleg ugyanaz lesz a center (lánchíd) - még akkor is ha a centert a html-ben is megadom. Nekem ez a bajom...
[...]
Tehát azt szeretném h a centert a html-ben tudjam beállítani."
Hogy a "HTML-ben is megadom", meg a "HTML-ben tudjam beállítani", azt nem egészen értem, mivel itt is JavaScript-kódban adtad meg a kezdőkoordinátákat. Persze amúgy HTML-kódba is bepasszírozhatod a már említett data-* attribútumokkal (erre kell gondolni: http://html5doctor.com/html5-custom-data-attributes/), csak nem biztos, hogy érdemes.Több markert így tudsz értelmesen kezelni:
https://developers.google.com/maps/documentation/javascript/examples/icon-complexItt van egy Places API-val összekötött térképes kereső:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
amint a találatra mész, középre rakja.Érdemes megnézni itt a demókat:
https://developers.google.com/maps/documentation/javascript/examples/A saját kódodban itt adtad meg a középponti koordinátákat:
var myLatlng = new google.maps.LatLng(47.506999, 19.045489);Ez itt van:
https://maps.google.com/maps?ll=47.499014,19.045299&z=13&t=m&hl=en-US&mapclient=apiv3
lásd az URL-ben ezt a részt: maps?ll=47.499014,19.045299
(tehát a query stringben ez a lényeg: ll=47.499014,19.045299
Tehát az eredmény azt mutatja, amit megadtál neki. -
Jim-Y
veterán
válasz
bazsika33 #3774 üzenetére
ezt többféleképp is meg lehet oldani, az egyik, hogy a js-ben le tudod kérdezni az url-t, ki tudod nyerni belőle, hogy melyik oldalon vagy épp, és e szerint be tudod állítani a centert.
Például felveszel egy olyan js objectet amiben a kulcsok a html oldalak nevei, értékek a latlng-ok.
var centers = {
elsoldal: new google.maps.LatLng(47.499014,19.043840),
masodik: new google.maps.LatLng(47.499014,19.043840)
stb...
}majd lekéred az url-t, ynílván az vmi http://enoldalam.hu/elsooldal.html lesz, ebből kinyered, hogy elsooldal, majd kikeresed az ehhez a kulcshoz tartozó értéket a centers objektumban és beállítod centernek.
Másik megoldás lehet, hogy a html kódba valahogy beégeted a koordinátákat, erre asszem vannak megoldások valamilyen data-* módszerrel, majd a js-ben lekéred a DOM-ból ezt az értéket még inicializálás előtt és beállítod centernek.
üdv
-
Sk8erPeter
nagyúr
válasz
bazsika33 #3772 üzenetére
Mindezt rakd fel kérlek jsFiddle-re, hogy ne nekünk kelljen vele tökölnünk:
értelemszerűen mindenféle kódot a saját panelébe, HTML-t a HTML-hez, JavaScript-kódot a JavaScript-panelbe, CSS-kódot a CSS-panelbe, aztán mentsd el a Save-re kattintva, majd a kapott URL-t dobd be ide nekünk.
Új hozzászólás Aktív témák
Hirdetés
- Samsung Galaxy A56 - megbízható középszerűség
- Autós topik látogatók beszélgetős, offolós topikja
- Álláskeresés, interjú, önéletrajz
- Kerékpárosok, bringások ide!
- Bambu Lab 3D nyomtatók
- AMD Ryzen 9 / 7 / 5 7***(X) "Zen 4" (AM5)
- Óvodások homokozója
- Óra topik
- Motorolaj, hajtóműolaj, hűtőfolyadék, adalékok és szűrők topikja
- Google Pixel topik
- További aktív témák...
- Csere-Beszámítás! Intel Core I5 14600K Processzor!
- Csere-Beszámítás! Lenovo Legion 5 White ! R5 5600H / RTX 3050Ti 6GB / 16GB / 500GB SSD
- T14 Gen1 14" FHD IPS i5-10310U 16GB 256GB NVMe magyar vbill ujjlolv IR kam gar
- FÓLIÁS! LG UltraWide 35WN75C-B Ívelt Monitor! 3440x1440 VA / 100Hz / 5ms / FreeSync
- Tom Clancy's The Division - Sleeper Agent Edition Xbox One
- AKCIÓ! PC Specialist Recoil VIII 17 notebook - i9 14900HX 16GB RAM 2TB SSD RTX 4060 8GB WIN11
- Új Apple iPhone 16 Pro 128GB, Kártyafüggetlen, 3 Év Garanciával
- BESZÁMÍTÁS! MSI B450 TomaHawk R5 5600X 32GB DDR4 512GB SSD RTX 3060 XC 12GB Rampage SHIVA 600W
- Beszámítás! Sony PlayStation 5 825GB SSD digital konzol garanciával, hibátlan működéssel
- BESZÁMÍTÁS! GIGABYTE AORUS ELITE Z790 i7 14700K 64GB DDR5 1TB SSD 7900XTX 24GB be quiet! SB802 1000W
Állásajánlatok
Cég: PC Trade Systems Kft.
Város: Szeged
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest