在页面上嵌入谷歌地图而不重写iPhone滚动行为

Question

我正在为手机优化网站。我们有一个位置页面，其中包含有关位置的信息以及通过Google Maps API绘制的该位置的地图。(v2 -我知道它被弃用了，但我还没有证明时间升级，"如果它不是坏了…")我想使用一个单列布局，基本信息，然后是地图，然后是更多的信息。

现在，当我用手指在iPhone上向下滚动移动页面时，一旦我到达地图，页面滚动被覆盖，地图开始平移。对我来说，向下滚动页面的唯一方法是将手指放在地图的上方或下方，假设这样的空间是可用的。如果我禁用地图拖动，那么当我开始向下滚动到地图时它不会平移但页面也不会滚动。我希望将地图视为可以滚动过去的静态图像，但仍然允许缩放按钮，并允许通过我编码的选择字段重画带有方向的地图，因此文字静态图像不是解决方案。

我发现这篇文章需要类似的功能，但它使用v3。我认为所有我需要做的是"添加触摸事件到地图容器，"但我不熟悉javascript的那一部分，我下面不允许正常的滚动。我是否需要在v3上咬紧牙关，或者我是否有一个添加触摸事件的bug，该事件具有简单的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; 

用户必须在呈现的代码之外的某个地方设置events变量，因为看起来匹配赋值是针对触摸事件的，而else赋值是针对键事件的。但由于我没有事件变量，它默认赋值是错误的。我只是将我的更改为start = e.touches[0].pageY(并对触摸端事件做了相同的操作)，现在一切都工作了。

然而，我切换回v2，看看它是否会与javascript错误纠正工作，它没有。因此，看起来我没有浪费任何时间升级到v3，既没有找出这个特定的解决方案，也没有为未来的兼容性设置自己。

总之，如果你想在移动页面上嵌入谷歌地图，并能够滚动过去，你需要使用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);