Встраивайте Карты Google на страницу без изменения режима прокрутки iPhone - PullRequest
Новая
       13

Встраивайте Карты Google на страницу без изменения режима прокрутки iPhone

9 голосов
/ 24 сентября 2011

Я работаю над оптимизацией сайта для мобильных устройств.У нас есть страница Местоположения, которая включает информацию о местоположении и карту местоположения через API Карт Google.(v2 - я знаю, что это устарело, но я не оправдал время для обновления, «если оно не сломано ...»). Я хочу использовать макет из одного столбца с базовой информацией, за которой следует карта, за которой следует дополнительная информация.

Теперь, когда я использую свой палец для прокрутки страницы мобильного устройства на iPhone, когда я попадаю на карту, прокрутка страницы переопределяется, и карта начинает панорамирование.Единственный способ для меня прокрутить дальше вниз по странице - положить палец выше или ниже карты, предполагая, что такое пространство доступно.Если я отключаю перетаскивание карты, то, когда я начинаю прокручивать страницу вниз и попадаю на карту, она не перемещается, но и страница не прокручивается.Я хотел бы рассматривать карту как статическое изображение, которое можно прокручивать, но при этом разрешить использование кнопок масштабирования и перерисовывать карту с указанием направлений в поле выбора, которое я закодировал, поэтому буквальное статическое изображение это не решение.

Я нашел этот пост, который требовал аналогичной функциональности , но он использует v3.Я думаю, что все, что мне нужно сделать, это «добавить сенсорные события в контейнер карты», но я не знаком с этой частью javascript, и то, что у меня есть ниже, не допускает нормальной прокрутки.Нужно ли прикусить пулю на v3, или у меня есть ошибка при добавлении сенсорных событий, которые имеют простое исправление javascript, чтобы делать то, что я хочу? 

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    geocoder = new GClientGeocoder();
  }
}

function showAddress(address, zoom) {
//clipped... this part works fine
}

//These three lines create a map that my finger pans
initialize(); 
showAddress("[clipped.. street, zip code]");
map.addControl(new GSmallZoomControl3D());

//This stops the map pan but still prevents normal page finger scrolling
map.disableDragging();

//If done right could this allow normal page finger scrolling??
var dragFlag = false;
map.addEventListener("touchstart", function(e){
   dragFlag = true;
   start = (events == "touch") ? e.touches[0].pageY : e.clientY; 
},true);
map.addEventListener("touchend", function(){ 
dragFlag = false; 
}, true);
map.addEventListener("touchmove",function(
if ( !dragFlag ) return;
end = (events == "touch") ? e.touches[0].pageY : e.clientY;   
window.scrollBy( 0,( start - end ) ); 
}, true);

Я также пытался заменить map.addEventListener наdocument.getElementById("map_canvas").addEventListener или document.addEventListener безрезультатно.

1 Ответ

18 голосов
/ 26 сентября 2011

Я решил эту проблему, обновившись до версии 3, а затем обнаружил базовую ошибку JavaScript при использовании кода из решения, указанного выше.Ключ был 

start = (events == "touch") ? e.touches[0].pageY : e.clientY;

Пользователь, должно быть, устанавливал переменную событий где-то за пределами представленного кода, поскольку похоже, что совпадающее назначение предназначено для сенсорных событий, а остальное - для ключевых событий.Но так как у меня не было переменной-события, по умолчанию это было неправильное назначение.Я просто изменил свой на start = e.touches[0].pageY (и сделал то же самое для события touchend), и теперь все работает.

Однако я переключился на v2, чтобы посмотреть, будет ли он работать с исправленной ошибкой JavaScript, и этоне.Похоже, что я не тратил время на обновление до v3, не разбираясь ни в этом конкретном решении, ни в настройке на будущую совместимость.

В заключение, если вы хотите встроить Карты Google на мобильную страницуи чтобы иметь возможность прокручивать его, вам нужно использовать API v3, отключить перетаскивание и добавить сенсорные события.Я также внес несколько небольших изменений в свой код, представленный здесь для тех, кто может получить выгоду в будущем: 

function initialize() 
{
    geocoder = new google.maps.Geocoder();
    var myOptions = {
       mapTypeId: google.maps.MapTypeId.ROADMAP             
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function showAddress(address, zoom) 
{
   if (geocoder) 
   {
      geocoder.geocode( { 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.setOptions( { zoom: zoom });
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
         }
      });
   }
}

initialize(); 
showAddress("'.$geocode_address.'");

map.setOptions( { draggable: false });

var dragFlag = false;
var start = 0, end = 0;

function thisTouchStart(e)
{
    dragFlag = true;
    start = e.touches[0].pageY; 
}

function thisTouchEnd()
{
    dragFlag = false;
}

function thisTouchMove(e)
{
    if ( !dragFlag ) return;
    end = e.touches[0].pageY;
    window.scrollBy( 0,( start - end ) );
}

document.getElementById("map_canvas").addEventListener("touchstart", thisTouchStart, true);
document.getElementById("map_canvas").addEventListener("touchend", thisTouchEnd, true);
document.getElementById("map_canvas").addEventListener("touchmove", thisTouchMove, true);
...