Вверх ↑
Ответов: 13
#0: 2018-01-04 23:55:39 ЛС | профиль | цитата
  Уже достаточно давно существует такая проблема, что при нажатии на карту в браузере на мобильном устройстве (в моем случае - Chrome 63 на Android 7.0) ничего не происходит, маркер словно прилипает к одной точке на карте и при каждом нажатии возвращается к ней.

Немного потупив в удаленном отладчике Chrome, изобразил такое решение, его, собственно, и хочу предложить вам от себя:

Исправление

[code]
// После выполнения не забудьте перезагрузить тайлы вызовом reloadTiles()

function getCoords(event){
var left = Number(wrapper.css('left').replace('px', ''));
var top = Number(wrapper.css('top').replace('px', ''));
var coords;
// В случае, если объект информации о касании не содержит в себе координат
if (event.clientY === undefined && event.clientX === undefined) {
coords = {
x: Math.ceil(event.originalEvent.changedTouches[0].clientY - top - TILE_SIZE / 2),
y: Math.ceil(0 - event.originalEvent.changedTouches[0].clientX + left + TILE_SIZE / 2)
}
} else {
coords = {
x: Math.ceil(event.clientY - top - TILE_SIZE / 2),
y: Math.ceil(0 - event.clientX + left + TILE_SIZE / 2)
}
}

return coords
};

function getTile(x, y){
var w = x * TILE_SIZE;
var h = y * TILE_SIZE;
var div = document.createElement('div');
server = server ? server : 1;
$(div).addClass('map-item');
$(div).append('‹div class="greed"›‹/div›');
var img;
if(x › (0 - MAP_SIZE) && x ‹ MAP_SIZE && y › (0 - MAP_SIZE) && y ‹ MAP_SIZE){
img = '‹img ondrag="return false" ondragdrop="return false" ondragstart="return false" src="%s" alt=""/›';
//img = 'url(%s) no-repeat';

if(worldDim == 0 && dayNightToggle == 'night'){
img = img.replace('%s', 'http://map.minecraft-galaxy.ru/maps/' + server + '/map-' + dayNightToggle + '/map_' + h + '_' + (0 - w) + '.png');
}
else if(zonesTiles && worldDim › -1){
//img = img.replace('%s', 'http://map.minecraft-galaxy.ru/layers/' + server + '/' + world + '/lr_' + h + '_' + (0 - w) + '.png');
img = img.replace('%s', 'http://map.minecraft-galaxy.ru/layer/' + server + '/' + world + '/' + worldDim + '/' + h + '/' + (0 - w) + '/map.png');
}
else{
if(worldDim == 0){
img = img.replace('%s', 'http://map.minecraft-galaxy.ru/maps/' + server + '/map-' + dayNightToggle + '/map_' + h + '_' + (0 - w) + '.png');
}
else{
img = img.replace('%s', 'http://map.minecraft-galaxy.ru/maps/' + server + '/map-' + worldDim + '/map_' + h + '_' + (0 - w) + '.png');
}
}

}
if(img){
$(div).append(img);
//$(div).css('background', img);
}
if(zonesTiles && worldDim › -1){
//TODO загрузка инфы по зоне
var lastX;
var lastY;
$(div).bind("mousedown touchstart", function(event){
lastX = event.screenX;
lastY = event.screenY;
event.preventDefault();
var orig = event.originalEvent;
if(orig.changedTouches){
lastX = orig.changedTouches[0].screenX;
lastY = orig.changedTouches[0].screenY;
}
});

$(div).bind("mouseup touchend", function(event){
if(!lock){
newX = event.screenX;
newY = event.screenY;
event.preventDefault();
var orig = event.originalEvent;
if(orig.changedTouches){
newX = orig.changedTouches[0].screenX;
newY = orig.changedTouches[0].screenY;
}

if(lastX › newX + 2 || lastX ‹ newX - 2 || lastY › newY + 2 || lastY ‹ newY - 2)
return;

var coords = getCoords(event);

// Замена живому отображению координат сверху на мобильных устройствах
if (event.type === 'touchend') {
coordinates.html('x : ' + coords.x + ' z : ' + coords.y)
}

showDesc('Загрузка...');
addArrowMarker(coords.x, coords.y);
$.get('/zoneinfo/?w=' + world + '&x=' + coords.x + '&y=' + coords.y, function(data){
if(data){
data = MD32.decode(data);
var zones = eval(data);
makeDesc(zones);
}
else{
showDesc('x : ' + coords.x + ' z : ' + coords.y);
}
});
}
});

}
$(div).css({left:w, top:h});
tilesWrap.append(div);
};
[/code]


[url=https://sinair.ru/paste/get/ZcmvqO0Q]Ссылка на код.[/url]

  Такое решение содержит два изменения:

    getCoords - если объект event не передает сразу же в себе координат нажатия, то используются координаты из event.originalEvent.changedTouches[0] (такое, как я полагаю, происходит только при событиях типа touch, но для перестраховки проверка идет не на событие, а на наличие координат непосредственно в event).
    getTile - дабы блок с координатами сверху, который на десктопных браузерах отображает координаты вживую, не простаивал, теперь он отображает координаты при клике, т.е. даже при клике на зону вы сможете узнать на какие координаты вы кликнули.


Демонстрация решения:
[youtube]XqEd-up5_Co[/youtube]
карма: 0
0
Тип: ошибка, Статус: выполнено