Adjon hozzá egy markeret a térképhez az api google térképek segítségével - szórakoztató webes térképészet
Ebben a részben megtudhatjuk, hogyan adhatunk hozzá markereket a térképhez pontok megjelöléséhez.
Vegyük a kódot az "Irányelvek hozzáadása a Google Térkép térképhez" című előző megjegyzéshez.
Ismétlem itt.
var map = új GMap2 (document.getElementById ("map_canvas")); map.setCenter (új GLatLng (56.32811,44.0), 10);
map.addControl (új GLargeMapControl ()); map.addControl (új GMapTypeControl ());
Kezdetben a GLargeMapControl vezérlőt a GSmallMapControl segítségével kicseréljük a térkép látható területének növelésére, és a múltbeli anyagot rögzítjük.
Ehhez cserélje ki a map.addControl vonalat (új GLargeMapControl ()); a map.addControl (új GSmallMapControl ());
Most adjuk hozzá a marker kijelölését a térképünkhöz.
Kezdetben meg kell tudnunk annak a pontnak a koordinátáit, amelyen a jelölőt fogjuk elhelyezni.
Ezt követően hozzá kell adnia egy kódsorozatot var pont = új GLatLng (56.293557,43.99898); ahol az 56.293557 és a 43.99898 helyett az értékeket helyettesítenünk kell.
Ha egy térképjelzőt szeretne hozzáadni a térképhez, használja a line map.addOverlay sort (új GMarker (pont));
Alapértelmezés szerint a G_DEFAULT_ICON ikon jelöli a jelölőt, de egyéni ikon is megadható.
A GMarker konstruktornak, a GLatLng-nek és az opcionális GMarkerOptions objektumnak az argumentumai használatosak.
A jelölők interaktív elemek. Alapértelmezés szerint például kapnak eseményeket, és megjelenítik az információs ablakokat az eseményhallgatókban.
És így a kód a vezérlők beállítása után két sorral bővült
pont = új GLatLng (56.293557,43.99898); map.addOverlay (új GMarker (pont));
var map = új GMap2 (document.getElementById ("map_canvas")); map.setCenter (új GLatLng (56.32811,44.0), 10);
map.addControl (új GSmallMapControl ()); map.addControl (új GMapTypeControl ());
pont = új GLatLng (56.293557,43.99898); map.addOverlay (új GMarker (pont));
Most próbáljuk meg hozzáadni a saját ikont markerként a térképen.
Az ikon létrehozásához két képre van szükségünk - maga az ikon és annak árnyéka (a példánkban nem használjuk az árnyékképet).
Az árnyékképet 45 fokos (fel és jobb) szögben kell létrehozni a főképből, és az árnyékkép bal alsó sarkát ugyanazon a vonalon kell elhelyezni a fö kép bal alsó sarkával. Az árnyékképeknek 24 bites PNG-képeknek kell lenniük az alfa áttetszőséggel, így a kép határainak áthelyezése a térképen helyes volt.
Először meg kell határoznunk az új jelvényt.
Ez a következő kóddal történik.
var myexIcon = új GIcon (); myexIcon.image = "files / cek_logo.png"; - állítsa be a fájlt az ikon képével
myexIcon.iconSize = új GSize (38, 29); - ikon mérete
myexIcon.iconAnchor = új GPoint (19, 14); - az ikon eltávolítása a pontból
myexIcon.infoWindowAnchor = új GPoint (5, 5); - információs ablak eltolás
Ezt követően meghatározzuk a GMarkerOptions objektumot
És a sorban map.addOverlay (új GMarker (pont)); utána, vesszővel. markerOptions.
Ennek eredményeként a következő kódot kapjuk:
map.setCenter (új GLatLng (56.32811,44.0), 10);
map.addControl (új GSmallMapControl ()); map.addControl (új GMapTypeControl ());
var myexIcon = új GIcon (); myexIcon.image = "files / cek_logo.png";
myexIcon.iconSize = új GSize (38, 29);
myexIcon.iconAnchor = új GPoint (19, 14);
myexIcon.infoWindowAnchor = új GPoint (5, 5);
point = új GLatLng (56.293557,43.99898); map.addOverlay (új GMarker (pont, markerOptions));
Az oldalt a böngészőbe helyezzük és nézzük
Navigáció rekordok szerint
Nagyon köszönöm a példát, mindent nagyon világosan írt, jó, hogy vannak olyan kedves emberek a hálózatban, mint te!
Nagyon köszönöm.
És hogyan adhat hozzá egy linket a jelölőhöz?
Link a balunhoz? Vagy hivatkozás egy másik oldal címére vagy a térkép menüjéről?
Igen. Te vagy a legjobb "tanár". Nem találtam egy leckét, hogy miként lehet hozzáfűzni a jelölő legegyszerűbb leírását. Kérlek, mondj le egy leckét ...
Alexei, egy esemény hozzáadásával egy jelölő kattogása elég egyszerű. Ha csak be kell nyomtatnia a szöveget, akkor a következő konstrukciót használom
/////
str = "Fejléc Csak a helyes szöveg, és egy kicsit több, és egy kicsit, hogy az ablak nyúlik, ahogy kellene ...";
GEvent.addListener (marker, "kattintás", függvény () map.openInfoWindowHtml (coords, str); // nyissa meg az ablakot, ha rákattint a markerre
>);
/////
Str. Puskin, a ház ...
(itt beillesztem az új marker kódját)
és így 10 ház ...
De nincsenek tokenek, mivel minden új markernek jelen kell lennie a (z) inicializálásban () ...
A lista kétszerese nem vonható le, azaz az elején "ul. Pushkin, a ház ... ", majd a funkció létrehozása, szintén nem működik ....
niichi, kérlek, magyarázd meg, kérem, mint a kattintással és a marker képeivel. Bo rám, vagy egy jelölő vagy egy információs ablak képe egy klikkben. Nem egyszerűen összeilleszteni őket, mint lehetetlen.
Adjon egy példát, de jobb leírni. Bo, ezt követem.
Köszönöm előre.
Nagyon köszönöm a leckéket! Nagyon segített a kezdeti szakaszban!