Pracujem na jednom projekte, kde som chcel do Google máp vložiť vlastné markery. Markery majú rôzne farby a sú očíslované. Zistil som, že o podobných riešeniach na internete veľa nie je (aspoň nebolo), a tak som sa musel dopracovať k vlastnému riešeniu.
Postup:
1. Vytvorenie triedy pre marker
Vytvoríme si triedu, ktorá bude reprezentovať náš marker, pri vytváraní inštancie si sem môžeme vložiť akékoľvek dáta, ktoré môžeme neskôr poučiť (napr. v metóde draw). Týmto spôsobom vieme napríklad očíslovať markery.
function MyMarker(latlng, map, num, status) {
this.latlng_ = latlng;
this.num_ = num; //naše číslo
this.status_ = status;
this.setMap(map);
}
2. Zdedenie objektu OverlayView
Musíme zdediť objekt OverlayView (ktorý je súčasťou Google API) aby sme mohli pracovať s našou treidou ako s markerom a kresliť do mapy.
CustomMarker.prototype = new google.maps.OverlayView();
3.Vytvorenie metódy na vykreslenie markera
Metóda v ktorej definujeme ako sa má vykrelsliť náš marker. Na tomto mieste pridáme CSS identifikátory a vložíme číslovanie. Pridáme markeru listener na klik a pridáme ho do DOM (dáme vedieť prehliadaču že existuje). Na záver mu povieme ako sa má vykresliť.
MyMarker.prototype.draw = function() {
var marker = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.className = "htmlMarker";
//naše číslovanie
var num = this.num;
div.innerHTML = '<div class="our-class">'+num+'</div>';
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(marker, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
//Umiestnenie nášho markera na mape
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.style.left = point.x-20 + 'px';
div.style.top = point.y-55+ 'px';
}
};
4. Štýlovanie
Teraz môžeme marker jednoducho naštýlovať pomocou CSS. Marker používame presne tak isto ako defaultný marker, pričom pri vytvorení inštacie posielame číslo nášho markera. Fungujúca ukážku môžete vidieť v mojom projekte houry.info, ktorý slúźi na zisťovanie otváracích hodín (na projekte sa stále pracuje).
Zdroje:
Ostatné články: