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"> Nowa linia <\/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";
});
Brak komentarzy:
Prześlij komentarz