marker - Kody, triki, sztuczki

19 mar 2023

#shorts - dodanie data attribute do markera

Oj dawno mnie tutaj nie było 😉
Dzisiaj coś co ostatnio mi się bardzo przydało, a mianowicie dodanie data attribute do markera. Potrzebowałem kilka takich elementów.
A więc zacząłem od rozszerzenia funkcji divIcon.
Poniżej funkcja, która jest dość prosta. Używamy metody createIcon

const DataMarkers = L.DivIcon.extend({
  createIcon: function (oldIcon) {
    let divElement = L.DivIcon.prototype.createIcon.call(this, oldIcon);

    // w pętli dodajemy odpowiednie elementy do markera
    if (this.options.data) {
      for (let key in this.options.data) {
        divElement.dataset[key] = this.options.data[key];
      }
    }
    return divElement;
  },
});

L.dataDivIcon = (options) => new L.DivIcon(options);

export default DataMarkers;

Czytaj dalej

25 kwi 2013

Proste dodawanie markera

var position = new google.maps.LatLng(lat,lng);

var markerOptions = {
position:position,
// draggable:true,
map:map,
title:'Tytuł'
};

var marker = new google.maps.Marker(markerOptions);

20 sty 2009

Przesunięcie mapy o 0,100 pikseli, panBy

var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(7, 20);

var marker = new GMarker(new GLatLng(52.50378799438477, 13.31508636474609), icon)
map.addOverlay(marker);
marker.openInfoWindowHtml('<b>Hotel</b>');
map.panBy(new GSize(0, 100));