Встраивание Google Maps на страницу без изменения поведения прокрутки iPhone

Я работаю над оптимизацией сайта для мобильных устройств. У нас есть страница местоположения, которая включает информацию о местоположении и карту местоположения через Google Maps API. (V2 - я знаю, что он устарел, но я не обосновал время для обновления, "если он не сломался ...") Я хочу использовать макет в один столбец с базовой информацией, за которой следует карта, за которой следует дополнительная информация .

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

Я нашел этот пост, требующий аналогичной функциональности , но использующий v3. Я думаю, что все, что мне нужно сделать, это «добавить события касания в контейнер карты», но я не знаком с этой частью javascript, а то, что у меня ниже, не допускает нормальной прокрутки.Нужно ли мне «укусить пулю» в версии 3, или у меня есть ошибка при добавлении событий касания, в которых есть простая коррекция 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 безрезультатно.

9
задан Community 23 May 2017 в 10:27
поделиться