在页面上嵌入Google地图而不会覆盖iPhone滚动行为

Question

我正在努力优化移动网站.我们有一个"位置"页面,其中包含有关位置的信息以及通过Google Maps API定位的地图.(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没有效果.

Answer 1

我通过升级到v3解决了这个问题,然后在我使用上面链接的解决方案中的代码时检测到了一个基本的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);