javascript - 在不覆盖 iPhone 滚动行为的情况下在页面上嵌入 Google map

Question

我正在优化一个移动网站。我们有一个位置页面，其中包含有关位置的信息和通过 Google Maps API 绘制的位置 map 。 (v2 - 我知道它已被弃用，但我没有证明升级的时间，“如果它没有坏..”)我想使用单列布局，其中包含基本信息，然后是 map ，然后是更多信息。

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

我找到了 this post that required similar functionality ，但它使用的是 v3。我认为我需要做的就是“向 map 容器添加触摸事件”，但我不熟悉那部分 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);

我也尝试用 document.getElementById("map_canvas").addEventListener 或 document.addEventListener 替换 map.addEventListener 无济于事.

Answer 1

我通过升级到 v3 解决了这个问题，然后在我使用上面链接的解决方案中的代码时检测到一个基本的 javascript 错误。关键是

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

用户一定是在所提供代码之外的某处设置了事件变量，因为看起来匹配赋值是针对触摸事件而其他赋值是针对按键事件。但由于我没有事件变量，它默认为错误的分配。我只是将我的更改为 start = e.touches[0].pageY(并对 touchend 事件做了同样的事情)，现在一切正常。

但是，我切换回 v2 以查看它是否适用于更正的 javascript 错误，但它没有。所以看起来我没有浪费任何时间升级到 v3，无论是找出这个特定的解决方案还是为将来的兼容性做好准备。

总而言之，如果您想在移动页面上嵌入 Google map 并能够滚动浏览它，您需要使用 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);