Question

我正在努力优化移动网站。我们有一个“位置”页面，其中包含有关位置的信息以及通过Google Maps API定位的地图。（v2 - 我知道它已被弃用，但我没有证明升级的时间，“如果没有破坏......”）我想使用单列布局，其中包含基本信息，然后是地图，后面跟着更多信息。< / p>

现在当我用手指向下滚动iPhone上的移动页面时，一旦我到达地图，页面滚动被覆盖并且地图开始平移。我向下滚动页面的唯一方法是将手指放在地图的上方或下方，假设有这样的空间可用。如果我禁用地图拖动，那么当我开始向下滚动并到达地图时它不会平移，但页面也不会滚动。我想将地图视为可以滚动过去的静态图像，但仍允许缩放按钮并允许通过我编码的选择字段重新绘制地图，因此literal static image不是溶液

我找到this post that required similar functionality，但它使用的是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);

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

1 个答案: