在页面上嵌入 Google 地图而不覆盖 iPhone 滚动行为 [英] Embed Google Maps on page without overriding iPhone scroll behavior

问题描述

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

I'm working on optimizing a site for mobile. We have a Location page that includes info about a location and a map of the location via the Google Maps API. (v2 - I know it's deprecated but I haven't justified the time to upgrade, "if it ain't broke..") I want to use a single column layout with basic information followed by the map followed by more information.

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

Now when I use my finger to scroll down the mobile page on an iPhone, once I get to the map, the page scrolling is overridden and the map starts panning. The only way for me to scroll farther down the page is to put my finger above or below the map, assuming such space is available. If I disable map dragging, then when I start scrolling down and get to the map it doesn't pan but the page doesn't scroll either. I would like to treat the map as a static image that I can scroll past, but still allow the zoom buttons and allow the map to be redrawn with directions through a select field I have coded, so a literal static image is not a solution.

我发现了这篇帖子需要类似的功能，但它使用的是 v3.我认为我需要做的就是向地图容器添加触摸事件"，但我不熟悉 javascript 的那部分，而且我下面的内容不允许正常滚动.我是否需要在 v3 上咬紧牙关，或者我是否在添加触摸事件时有错误，这些事件具有简单的 javascript 更正以执行我想要的操作?

I found this post that required similar functionality, but it's using v3. I think all I need to do is "add touch events to the map container," but I'm not familiar with that part of javascript, and what I have below does not allow normal scrolling. Do I need to bite the bullet on v3, or do I have a bug on adding touch events that has a simple javascript correction to do what I want?

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 无济于事.

I have also tried replacing map.addEventListener with document.getElementById("map_canvas").addEventListener or document.addEventListener to no avail.

推荐答案

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

I solved it by upgrading to v3 and then detecting a basic javascript error in my use of the code from the solution linked above. The key was

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

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

The user must have been setting the events variable somewhere outside the presented code, since it looks like the matching assignment is for touch events and the else assignment is for key events. But since I didn't have an events variable it was defaulting to the wrong assignment. I simply changed mine to start = e.touches[0].pageY (and did the same for the touchend event) and now everything works.

但是，我切换回 v2 以查看它是否可以在更正了 javascript 错误的情况下工作，但它没有.所以看起来我没有浪费任何时间升级到 v3，既没有想出这个特定的解决方案，也没有为未来的兼容性做好准备.

However, I switched back to v2 to see if it would work with that javascript error corrected, and it did not. So it looks like I did not waste any time upgrading to v3, neither in figuring out this specific solution nor in setting myself up for future compatibility.

总而言之，如果您想在移动页面上嵌入 Google 地图并能够滚动浏览它，您需要使用 API v3、禁用拖动并添加触摸事件.我也对我的代码进行了一些小的调整，在此提供给将来可能受益的任何人:

In conclusion, if you want to embed Google Maps on a mobile page and be able to scroll past it, you need to use API v3, disable dragging, and add touch events. I made a few minor tweaks to my code as well, presented here for any who may benefit in the future:

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 滚动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！