Mapy Google - kreator ścieżek - ulepszanie UI

Po serii ulepszania i dodawania nowych funkcjonalności do naszej aplikacji, pora na drobne poprawki i usprawnienia w ich obsłudze. Tym razem na tapecie znajdzie się dopasowywanie okna do rozmiaru narysowanej linii, wyeliminowanie dodawania kilku linii po wielokrotnym naciśnięciu przycisku 'Nowa linia' oraz zamiana tego przycisku na menu kontekstowe.

Dopasowanie okna

Dopasowanie okna zostanie przypisane do zdarzenia endline oraz click dla tworzonej linii, a także podczas usuwania linii - wyrównując do pierwszej linii na liście (jeżeli jakaś istnieje). W tym celu napiszemy nastepującą funkcję, która będzie centrować mapę na obiekcie podanym w parametrze.

function centerOn(poly) {
    map.setCenter(poly.getBounds().getCenter());
    map.setZoom(map.getBoundsZoomLevel(poly.getBounds()));
} 

function removeLine(i) {
map.removeOverlay(polylines.getAt(i));
 polylines.removeAt(i);
 updatePolyData(0);
 
 var polyIterator = polylines.startElement;
 if (polylines.length>0) {
  centerOn(polylines.getAt(0));
  for (var j=0; j<polylines.length; j++) {
   polyIterator.data.indexInDoubleLinkedList = j;
   polyIterator = polyIterator.nextElement;
  }
 }
} 

Zabezpieczenie przed wielokrotnym tworzeniem linii

Zabezpieczenie przed wielokrotnym tworzeniem linii rozwiążemy stosując globalną flagę imieniem busy. Do funkcji draw() odpowiedzalnej za tworzenie nowej ścieżki dodamy kod kontrolujący, a do zdarzenia endline zostanie włączony kod wyłączający flagę. W ten sposób funkcja draw() przyjmuje następujący kod:

var busy = false;

function draw() {

    if (busy)
        return;
    busy = true;
    var poly = new GPolyline([], 'black');
    map.addOverlay(poly);
    poly.enableDrawing({});
    
    poly.enableEditing({onEvent: "mouseover"});
    poly.disableEditing({onEvent: "mouseout"});
      
    GEvent.addListener(poly, "endline", function () {busy = false; centerOn(poly);});
    GEvent.addListener(poly, "lineupdated", function(){updatePoly(poly);});
      
    GEvent.addListener(poly, "click", function(latlng, index) {
        updatePolyData(poly.indexInDoubleLinkedList);
        centerOn(poly);
    });
}

Menu kontekstowe

Menu kontekstowe oprzemy o metodą zaproponowaną przez Mike'a Williamsa na jego stronie o mapach Googla. Najpierw tworzymy warstwę div, którą będziemy wypełniać kodem HTML (wówczas pozwoli to na wykorzystanie jednego menu z różną zawartością).

var contextmenu = document.createElement("div");
contextmenu.style.visibility="hidden";
contextmenu.style.background="#ffffff";
contextmenu.style.border="1px solid #888888";

var mapContextHtml = '<a href="javascript:draw()"><div class="context">&nbsp;&nbsp;Nowa linia&nbsp;&nbsp;<\/div><\/a>';

Kolejnym etapem jest dodanie zdarzenia do mapy singlerightclick, które będzie rozpoznawało, czy kliknięcie zostało wykonane na mapie i tylko wtedy zostanie pokazane. Taka sytuacja ma miejsce, kiedy trzeci parametr w funkcji obsługującej zdarzenie jest równy null. Ponieważ już wcześniej została zdefiniowana obsługa zdarzenia kliknięcia prawego przycisku, więc jedynie dodajemy następujący kod do funkcji:

// kliknięcie w mapę
if (c == null) {
    var x=a.x;
    var y=a.y;
    if (x > map.getSize().width - 120) { x = map.getSize().width - 120 }
    if (y > map.getSize().height - 100) { y = map.getSize().height - 100 }
    var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));
    contextmenu.innerHTML = mapContextHtml;
    pos.apply(contextmenu);
    contextmenu.style.visibility = "visible";
}

Jednocześnie dla zdarzenia click dla mapy będziemy chować menu.

GEvent.addListener(map, "click", function(a, latlng) {
    contextmenu.style.visibility="hidden";       
});

numer linii	długość	usuń

Tekst
KML