Witam serdecznie,
Mam taką mapkę: http://serwer1356363.home.pl/test/mapka.php
<!DOCTYPE HTML>
<html lang="pl">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="container">
<section id="content">
<style>
#flightMap {
width: 845px;
height: 466px;
position: relative;
overflow: hidden;
}
#flightMapContainer {
width: 845px;
height: 466px;
position: relative;
}
canvas {
background: transparent;
position: absolute;
top: 0;
left: 0;
}
#zoomButtons {
position: absolute;
bottom: 10px;
left: 10px;
width: 34px;
color: #fff;
}
#buttonsZoom > button {
display: block;
padding: 0;
border: none;
}
#buttonsZoom {
float: right;
-webkit-box-shadow: 0px 0px 25px 0px rgba(145, 142, 149, 0.3);
-moz-box-shadow: 0px 0px 25px 0px rgba(145, 142, 149, 0.3);
box-shadow: 0px 0px 25px 0px rgba(145, 142, 149, 0.3);
}
#zoomIn, #zoomOut {
width: 34px;
height: 34px;
margin: 0;
padding: 0;
}
#zoomIn {
background: url('images/zoomin.png');
margin-bottom: 0px;
}
#zoomOut {
background: url('images/zoomout.png');
margin-top: 0px;
}
#zoomIn:hover {
background: url('images/zoominhover.png');
}
#zoomOut:hover {
background: url('images/zoomouthover.png');
}
</style>
<div id="flightMap">
<div id="flightMapContainer">
<canvas id="secondBackgroundElements" width="815" height="466"></canvas>
<canvas id="generalElements" width="815" height="466"><div>
<img src="images/error_icon.png" class="feedback-icon">
<p>
Ta aplikacja uĹźywa nowoczesnych funkcji przeglÄdarki, ktĂłrych Twoja przeglÄdarka nie obsĹuguje.<br>
Aby uzyskaÄ najlepsze efekty, pobierz <a href="//www.google.com/chrome/">najnowszÄ wersjÄ przeglÄdarki Chrome</a>.
</p>
</div></canvas>
</div>
<div id="zoomButtons">
<div id="buttonsZoom">
<button id="zoomIn"></button>
<button id="zoomOut"></button>
</div>
</div>
<script>
var planes = null;
(function () {
var OPTIONS = {
ORIGINAL_WIDTH: 845,
ORIGINAL_HEIGHT: 466,
MAX_ZOOM_LEVEL: 4
},
images = {
airportTown: new Image(),
background: 'background.png'
},
obiects = {
documentObiect: document,
mathObiect: Math,
dateObiect: Date,
windowObiect: window
},
flightMapContainer = obiects.documentObiect.getElementById('flightMapContainer'),
secondBackgroundElements = obiects.documentObiect.getElementById('secondBackgroundElements'),
generalElements = obiects.documentObiect.getElementById('generalElements'),
secondContext = secondBackgroundElements.getContext('2d'),
generalContext = generalElements.getContext('2d'),
canvasWidth = generalElements.width,
canvasHeight = generalElements.height,
canvasWidthTmp = canvasWidth * zoom,
canvasHeightTmp = canvasHeight * zoom,
scaleX = canvasWidth / OPTIONS.ORIGINAL_WIDTH,
scaleY = canvasHeight / OPTIONS.ORIGINAL_HEIGHT,
zoom = 1,
rangeOfXAndY = {
x: {
min: 0,
max: function () {
return this.min + canvasWidthTmp;
},
lastMin: 0,
lastMax: function () {
return this.lastMin + canvasWidthTmp;
}
},
y: {
min: 0,
max: function () {
return this.min + canvasHeightTmp;
},
lastMin: 0,
lastMax: function () {
return this.min + canvasHeightTmp;
}
}
},
dragging = false;
var timer, airports, planes, beforeDragPosX, beforeDragPosY;
function addEvent(evnt, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(evnt, func, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + evnt, func);
}
else {
elem[evnt] = func;
}
}
function ajax(options) {
options = {
type: options.type || "POST",
url: options.url || "",
onComplete: options.onComplete || function () {
},
onError: options.onError || function () {
},
onSuccess: options.onSuccess || function () {
},
dataType: options.dataType || "text"
};
var xml = new XMLHttpRequest();
xml.open(options.type, options.url, true);
xml.onreadystatechange = function () {
if (xml.readyState == 4) {
if (httpSuccess(xml)) {
var returnData = (options.dataType == "xml") ? xml.responseXML : xml.responseText
options.onSuccess(returnData);
} else {
options.onError();
}
options.onComplete();
xml = null;
}
};
xml.send();
function httpSuccess(r) {
try {
return (r.status >= 200 && r.status < 300 || r.status == 304 || navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined")
} catch (e) {
return false;
}
}
}
function completeArraysFromJSON(data) {
var jsonObiect = JSON.parse(data),
planesObiect = jsonObiect.planes,
airportsObiect = jsonObiect.airports,
planesLength = obiectLength(planesObiect),
airportsLength = obiectLength(airportsObiect);
planes = [];
airports = [];
for (var i = planesLength; i--; ) {
var plane = planesObiect[i],
airplaneIconTop = new Image(),
airplaneIconTopRight = new Image(),
airplaneIconRight = new Image(),
airplaneIconBottomRight = new Image(),
airplaneIconBottom = new Image(),
airplaneIconBottomLeft = new Image(),
airplaneIconLeft = new Image(),
airplaneIconTopLeft = new Image();
airplaneIconTop.src = plane.icons.top;
airplaneIconTopRight.src = plane.icons.topRight;
airplaneIconRight.src = plane.icons.right;
airplaneIconBottomRight.src = plane.icons.bottomRight;
airplaneIconBottom.src = plane.icons.bottom;
airplaneIconBottomLeft.src = plane.icons.bottomLeft;
airplaneIconLeft.src = plane.icons.left;
airplaneIconTopLeft.src = plane.icons.topLeft;
planes.push([plane.name, plane.startTime, plane.finishTime, parseInt(plane.velocity), parseInt(plane.startAirport), parseInt(plane.finishAirport), [airplaneIconTop, airplaneIconTopRight, airplaneIconRight, airplaneIconBottomRight, airplaneIconBottom, airplaneIconBottomLeft, airplaneIconLeft, airplaneIconTopLeft], null, null, null, null, null, null, plane.lineColor, plane.startAirportName, plane.finishAirportName, plane.logo, plane.occupancy, plane.country, plane.shortcut, plane.designation, plane.owner]);
}
for (var y = airportsLength; y--; ) {
var airport = airportsObiect[y],
airportX = parseInt(airport.positionX) * scaleX,
airportY = parseInt(airport.positionY) * scaleY,
newAirportX = airportX * zoom,
newAirportY = airportY * zoom;
airports.push([parseInt(airport.id), newAirportX - 10, newAirportY - 10, airport.name, airport.country, airport.shortcut, airportX, airportY, airport.logo, airport.occupancy, airport.seat, airport.size]);
}
drawPlanes(planes, airports);
drawAirports(airports);
}
function completeArraysAfterUpdate(planesArray, airportsArray) {
var planesLength = planesArray.length,
airportsLength = airportsArray.length;
for (var i = planesLength; i--; ) {
var plane = planesArray[i];
plane[7] = null;
plane[8] = null;
plane[9] = null;
plane[10] = null;
planes[i] = plane;
}
for (var y = airportsLength; y--; ) {
var airport = airportsArray[y],
newAirportX = airport[6] * zoom,
newAirportY = airport[7] * zoom;
airport[1] = newAirportX - 10;
airport[2] = newAirportY - 10;
airports[y] = airport;
}
drawPlanes(planes, airports);
drawAirports(airports);
}
function drawPlanes(planesArray, airportsArray) {
var planesLength = planesArray.length,
airportsLength = airportsArray.length,
dateNow = obiects.dateObiect.now();
clearTimeout(timer);
generalContext.clearRect(0, 0, canvasWidth * zoom, canvasHeight * zoom);
for (var i = planesLength; i--; ) {
var plane = planesArray[i];
if (obiects.dateObiect.parse(plane[1]) <= dateNow && obiects.dateObiect.parse(plane[2]) >= dateNow) {
if (plane[7] === null || plane[8] === null || plane[9] === null || plane[10] === null) {
for (var y = airportsLength; y--; ) {
var airport = airportsArray[y];
if (plane[4] === airport[0]) {
plane[7] = airport[1] + 10;
plane[8] = airport[2] + 10;
}
else if (plane[5] === airport[0]) {
plane[9] = airport[1] + 10;
plane[10] = airport[2] + 10;
}
}
}
console.log('rysuj');
var deltaStartFinish = (obiects.dateObiect.parse(plane[2]) - obiects.dateObiect.parse(plane[1])) / 1000,
pxPerSecondX = (plane[9] - plane[7]) / deltaStartFinish,
pxPerSecondY = (plane[10] - plane[8]) / deltaStartFinish,
deltaTime = (dateNow - obiects.dateObiect.parse(plane[1])) / 1000,
pxOnFinishX = plane[7] + deltaTime * pxPerSecondX,
pxOnFinishY = plane[8] + deltaTime * pxPerSecondY,
icons = plane[6];
generalContext.strokeStyle = plane[13];
generalContext.lineWidth = 2;
generalContext.beginPath();
generalContext.moveTo(plane[7], plane[8]);
generalContext.lineTo(pxOnFinishX, pxOnFinishY);
generalContext.stroke();
drawPlaneIcon(icons, pxOnFinishX, pxOnFinishY, plane[7], plane[8], plane[9], plane[10]);
plane[11] = pxOnFinishX - 10;
plane[12] = pxOnFinishY - 10;
planes[i] = plane;
}
}
timer = setTimeout(drawPlanes, 1000, planes, airports)
}
function drawPlaneIcon(plane, pxOnFinishX, pxOnFinishY, startX, startY, finishX, finishY) {
if (startX === finishX && startY > finishY) {
generalContext.drawImage(plane[0], pxOnFinishX - 10, pxOnFinishY - 10);
}
else if (startX < finishX && startY > finishY) {
generalContext.drawImage(plane[1], pxOnFinishX - 10, pxOnFinishY - 10);
}
else if (startX < finishX && startY === finishY) {
generalContext.drawImage(plane[2], pxOnFinishX - 10, pxOnFinishY - 10);
}
else if (startX < finishX && startY < finishY) {
generalContext.drawImage(plane[3], pxOnFinishX - 10, pxOnFinishY - 10);
}
else if (startX === finishX && startY < finishY) {
generalContext.drawImage(plane[4], pxOnFinishX - 10, pxOnFinishY - 10);
}
else if (startX > finishX && startY < finishY) {
generalContext.drawImage(plane[5], pxOnFinishX - 10, pxOnFinishY - 10);
}
else if (startX > finishX && startY === finishY) {
generalContext.drawImage(plane[6], pxOnFinishX - 10, pxOnFinishY - 10);
}
else {
generalContext.drawImage(plane[7], pxOnFinishX - 10, pxOnFinishY - 10);
}
}
function MeasureText(text, bold, font, size)
{
// This global variable is used to cache repeated calls with the same arguments
var str = text + ':' + bold + ':' + font + ':' + size;
if (typeof ( __measuretext_cache__ ) == 'object' && __measuretext_cache__ [str]) {
return __measuretext_cache__ [str];
}
var div = document.createElement('DIV');
div.innerHTML = text;
div.style.position = 'absolute';
div.style.top = '-100px';
div.style.left = '-100px';
div.style.fontFamily = font;
div.style.fontWeight = bold ? 'bold' : 'normal';
div.style.fontSize = size + 'pt';
document.body.appendChild(div);
var size = [div.offsetWidth, div.offsetHeight];
document.body.removeChild(div);
// Add the sizes to the cache as adding DOM elements is costly and can cause slow downs
if (typeof ( __measuretext_cache__ ) != 'object') {
__measuretext_cache__ = [];
}
__measuretext_cache__ [str] = size;
return size;
}
function drawAirports(airports) {
var length = airports.length;
secondContext.clearRect(0, 0, canvasWidth * zoom, canvasHeight * zoom);
secondContext.font = "8pt Arial";
secondContext.fillStyle = "#c69c6d";
for (var i = length; i--; ) {
var airport = airports[i];
secondContext.drawImage(images.airportTown, airport[1], airport[2]);
airport[8] = MeasureText(airport[3], false, 'Arial', 8)[0];
airport[9] = MeasureText(airport[3], false, 'Arial', 8)[1];
secondContext.fillText(airport[3], airport[1] + 20, airport[2] + 20);
console.log(airport[1] + 20);
}
}
function obiectLength(obiect) {
var count = 0,
i;
for (i in obiect) {
if (obiect.hasOwnProperty(i)) {
count++;
}
}
return count;
}
function drawPlaneInfo(plane) {
var flightMap = obiects.documentObiect.getElementById('flightMapContainer'),
planeInfoDiv = obiects.documentObiect.createElement('div'),
divX = plane[11],
divY = plane[12] + 20 + 10;
removeInfo(flightMap);
planeInfoDiv.setAttribute('id', 'planeInfo');
planeInfoDiv.setAttribute('style', 'position: absolute; width: 200px; font-size: 12px; background: #5E5E5E; border: 1px solid #333333; padding: 5px; color: white; top: ' + divY + 'px; left: ' + divX + 'px;');
planeInfoDiv.innerHTML = "<p><b>Nazwa:</b> " + plane[0] + "</p><p><b>Nazwa lotniska poczÄtkowego:</b> " + plane[14] + "</p><p><b>Nazwa lotniska koĹcowego:</b> " + plane[15] + "</p><p><b>Data startu:</b> " + plane[1] + "</p><p><b>Data lÄdowania:</b> " + plane[2] + " </p><p><b>PrÄdkoĹÄ:</b> " + plane[3] + " km/h </p><p><b>Oznaczenie:</b> " + plane[20] + "</p><p><b>WĹaĹciciel:</b> " + plane[21] + "</p>";
flightMap.appendChild(planeInfoDiv);
window.setTimeout(removeInfo, 10000, flightMap);
}
function drawAirportInfo(airport) {
var flightMap = obiects.documentObiect.getElementById('flightMapContainer'),
airportInfoDiv = obiects.documentObiect.createElement('div'),
divX = airport[1],
divY = airport[2] + 20 + 10;
removeInfo(flightMap);
airportInfoDiv.setAttribute('id', 'airportInfo');
airportInfoDiv.setAttribute('style', 'position: absolute; width: 250px; font-size: 12px; background: #5E5E5E; border: 1px solid #333333; padding: 5px; color: white; top: ' + divY + 'px; left: ' + divX + 'px;');
airportInfoDiv.innerHTML = "<p><b>Nazwa:</b> " + airport[3] + "</p><p><b>Kraj: </b>" + airport[4] + "</p><p><b>ObĹoĹźenie:</b> " + airport[9] + "</p><p><b>WielkoĹÄ:</b> " + airport[11] + "</p>";
flightMap.appendChild(airportInfoDiv);
window.setTimeout(removeInfo, 10000, flightMap);
}
function removeInfo(flightMap) {
if (obiects.documentObiect.getElementById('planeInfo')) {
flightMap.removeChild(obiects.documentObiect.getElementById('planeInfo'));
}
if (obiects.documentObiect.getElementById('airportInfo')) {
flightMap.removeChild(obiects.documentObiect.getElementById('airportInfo'));
}
}
function drawBackground() {
flightMapContainer.style.background = "url('" + images.background + "')";
flightMapContainer.style.backgroundSize = "cover";
}
function set_translate(e, x, y) {
e.style["-webkit-transform"] = "translate(" + x + "px, " + y + "px)";
e.style["-moz-transform"] = "translate(" + x + "px, " + y + "px)";
e.style["-ms-transform"] = "translate(" + x + "px, " + y + "px)";
e.style["-o-transform"] = "translate(" + x + "px, " + y + "px)";
e.style["transform"] = "translate(" + x + "px, " + y + "px)";
}
function updateElementsSize() {
canvasWidthTmp = canvasWidth * zoom;
canvasHeightTmp = canvasHeight * zoom;
flightMapContainer.style.width = canvasWidthTmp + 'px';
flightMapContainer.style.height = canvasHeightTmp + 'px';
secondBackgroundElements.width = canvasWidthTmp;
secondBackgroundElements.height = canvasHeightTmp;
generalElements.width = canvasWidthTmp;
generalElements.height = canvasHeightTmp;
}
function zoomIn() {
if (zoom < OPTIONS.MAX_ZOOM_LEVEL) {
++zoom;
removeInfo(obiects.documentObiect.getElementById('flightMapContainer'));
rangeOfXAndY.x.min = rangeOfXAndY.x.lastMin;
rangeOfXAndY.y.min = rangeOfXAndY.y.lastMin;
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
if (zoom === 2) {
rangeOfXAndY.x.min = 0;
rangeOfXAndY.y.min = 0;
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
}
updateElementsSize();
completeArraysAfterUpdate(planes, airports);
}
}
function zoomOut() {
if (zoom > 1) {
--zoom;
removeInfo(obiects.documentObiect.getElementById('flightMapContainer'));
rangeOfXAndY.x.min = rangeOfXAndY.x.min / zoom;
rangeOfXAndY.y.min = rangeOfXAndY.y.min / zoom;
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
if (zoom === 1) {
rangeOfXAndY.x.min = 0;
rangeOfXAndY.y.min = 0;
rangeOfXAndY.x.lastMin = 0;
rangeOfXAndY.y.lastMin = 0;
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
}
updateElementsSize();
completeArraysAfterUpdate(planes, airports);
}
}
function mouseMove(e) {
if (dragging) {
if (zoom > 1) {
var differenceX = ~~((e.clientX - beforeDragPosX) / 5),
differenceY = ~~((e.clientY - beforeDragPosY) / 5);
if (rangeOfXAndY.x.min + differenceX >= (canvasWidthTmp - canvasWidth) * (-1) && rangeOfXAndY.x.min + differenceX <= 0)
{
rangeOfXAndY.x.min += differenceX;
}
if (rangeOfXAndY.y.min + differenceY >= (canvasHeightTmp - canvasHeight) * (-1) && rangeOfXAndY.y.min + differenceY <= 0) {
rangeOfXAndY.y.min += differenceY;
}
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
rangeOfXAndY.x.lastMin = rangeOfXAndY.x.min;
rangeOfXAndY.y.lastMin = rangeOfXAndY.y.min;
}
}
}
function getPos(el) {
for (var lx = 0, ly = 0;
el != null;
lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent)
;
return {x: lx, y: ly};
}
function init() {
images.airportTown.src = 'ikona.png';
drawBackground();
addEvent('load', images.airportTown, function () {
ajax({
url: "http://serwer1356363.home.pl/test/map.php",
onSuccess: completeArraysFromJSON
});
});
addEvent('click', obiects.documentObiect.getElementById('zoomIn'), zoomIn);
addEvent('click', obiects.documentObiect.getElementById('zoomOut'), zoomOut);
addEvent('mousewheel', generalElements, function (e, delta) {
delta = delta || -e.detail || e.wheelDelta;
if (delta > 0) {
zoomIn();
} else {
zoomOut();
}
e.preventDefault();
});
addEvent('DOMMouseScroll', generalElements, function (e, delta) {
delta = delta || -e.detail || e.wheelDelta;
if (delta > 0) {
zoomIn();
} else {
zoomOut();
}
e.preventDefault();
});
addEvent('mouseup', generalElements, function () {
dragging = false;
generalElements.style.cursor = "default";
});
addEvent('mousedown', generalElements, function (e) {
dragging = true;
beforeDragPosX = e.clientX;
beforeDragPosY = e.clientY;
generalElements.style.cursor = "move";
});
addEvent('mouseleave', generalElements, function () {
dragging = false;
generalElements.style.cursor = "default";
});
addEvent('mousemove', generalElements, mouseMove);
addEvent('click', generalElements, function (e) {
var planesLength = planes.length,
airportsLength = airports.length,
clientX = e.clientX,
clientY = e.clientY,
xOffset = obiects.windowObiect.pageXOffset,
yOffset = obiects.windowObiect.pageYOffset,
elPos = getPos(obiects.documentObiect.getElementById('flightMap')),
differenceX = rangeOfXAndY.x.min * (-1),
differenceY = rangeOfXAndY.y.min * (-1);
removeInfo(obiects.documentObiect.getElementById('flightMapContainer'));
for (var i = planesLength; i--; ) {
var plane = planes[i];
if ((clientX - elPos.x + differenceX + xOffset) > plane[11] && (clientX - elPos.x + differenceX + xOffset) < (plane[11] + 20) && (clientY - elPos.y + differenceY + yOffset) > plane[12] && (clientY - elPos.y + differenceY + yOffset) < (plane[12] + 20)) {
drawPlaneInfo(plane);
}
}
for (var y = airportsLength; y--; ) {
var airport = airports[y];
if ((clientX - elPos.x + differenceX + xOffset) > airport[1] && (clientX - elPos.x + differenceX + xOffset) < (airport[1] + 20) && (clientY - elPos.y + differenceY + yOffset) > airport[2] && (clientY - elPos.y + differenceY + yOffset) < (airport[2] + 20)) {
drawAirportInfo(airport);
}
if ((clientX - elPos.x + differenceX + xOffset) > airport[1] + 20 && (clientX - elPos.x + differenceX + xOffset) < airport[1] + 20 + airport[8] && (clientY - elPos.y + differenceY + yOffset) > airport[2] + 10 && (clientY - elPos.y + differenceY + yOffset) < airport[2] + 10 + airport[9]) {
drawAirportInfo(airport);
}
console.log(clientX - elPos.x + differenceX + xOffset);
}
});
}
init();
})();
</script>
</div>
</body>
</html>
Wszystko działa jak należy - prócz przesuwania i oddalania/przybliżania. Proszę spróbujcie przesunąć, przybliżyć/oddalić mapkę - strasznie “przeskakuje” lub “sama” się przesuwa.
Potrafiłby ktoś może usunąć powyższe problemy?
Baaardzo proszę o pomoc,
Northwest