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

我正在努力优化移动网站.我们有一个位置页面,通过Google Maps API包含有关位置的信息和位置的地图. (v2 – 我知道这是不推荐的,但是我没有理由升级的时间,“如果没有破坏..”)我想使用单个列布局,其中包含基本信息,然后是地图,然后是更多信息.

现在,当我使用手指向下滚动iPhone上的移动页面时,一旦我到达地图,页面滚动将被覆盖,并且地图开始平移. 200新新新新旗新新新旗新新旗旗新新旗旗新新旗旗新新旗旗新新旗旗新新旗新旗新新旗旗新新旗旗新新旗新旗旗新新旗新旗新新旗旗新新200新新新旗新新200新200旗新新200新新旗旗规格新新新新旗新新新旗新新新旗新新新旗新新旗旗新新旗新200旗新新旗新新旗旗新新旗新新旗旗新新旗旗新新旗新旗新新旗新新旗新新旗旗新新旗新新旗旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新旗我想将地图视为静态图像,我可以滚动过去,但仍然允许缩放按钮,并允许通过我已编码的选择字段的方向重绘地图,所以literal static image不是一个解决方案.

我发现this post that required similar functionality,但它使用v3.我想我所需要做的只是“添加触摸事件到地图容器”,但我不熟悉那部分javascript,而我以下的内容不允许正常滚动. X-

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”)替换map.addEventListener.addEventListener或document.addEventListener无效.

解决方法

我解决了通过升级到v3,然后检测到一个基本的JavaScript错误,我使用上面链接的代码.关键是

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

用户必须将事件变量设置在所呈现的代码之外的某处,因为它看起来像匹配的分配是触摸事件,而其他分配是关键事件.但是由于我没有事件变量,因此它是默认的错误的作业.我只是改变了我的开始= 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);

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

解决方法

相关推荐