我有一个移动网页，客户可以在其中通过表单提交或当前位置弹出窗口输入他们的邮政编码，然后找到附近的中心。响应包括这些中心的列表以及显示其位置的 google map 插入和指示列表中指示的中心的图钉。

问题是 map 占用了页面上的大量空间。很难向下滚动到 map 下方的列表。

我想禁用 Google map 上的平移功能，以便人们可以触摸 map 并上下滚动页面。但是，我不想完全抑制 map 上的所有触摸事件，因为我仍然希望人们能够单击图钉并查看与这些标记一起出现的弹出信息框。这就是为什么我认为静态图像实现可能不是可行的方法。

这是页面的链接:

http://cs.sandbox.millennialmedia.com/~tkirchner/sites/K/kumon/zip_page.php

我对 Google API 还是比较陌生，所以我确定我需要自定义一些选项或事件监听器，但我似乎在文档中找不到它。

如有任何帮助或链接，我们将不胜感激。

function setMap(map) {
    if ( typeof googleMap != 'undefined' && !changeFlag ) return;

    var current = new google.maps.LatLng( f.current.latitude, 
        f.current.longitude );
    var dragFlag = false;
    var start = 0, end = 0, windowPos = 0;
    zoom = zoom == 0 ? bestZoom() : zoom;
    map.html('');

    var mapArgs = {
        zoom : zoom,
        center : current,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        backgroundColor : '#FFFFFF',
        mapTypeControl : false,
    };
    if ( !config.panning ) mapArgs['draggable'] = false;

    googleMap = new google.maps.Map(map.get(0), mapArgs);
    new google.maps.Marker({
        position : current,
        map : googleMap,
        title : 'You Are Here',
        icon : 'youarehere.png'
    });

    movement = 0;

    if ( !config.panning && events == 'touch' ) {
        map.get(0).addEventListener('touchstart', function(e){
            dragFlag = true;
            start = events == 'touch' ? e.touches[0].pageY : e.clientY; 
        },true);
        map.get(0).addEventListener('touchend', function(){ 
            dragFlag = false; 
        }, true);
        map.get(0).addEventListener('touchmove',function(e){
            if ( !dragFlag ) return;
            end = events == 'touch' ? e.touches[0].pageY : e.clientY;   
            window.scrollBy( 0,( start - end ) ); 
        }, true);
    }

    for( var i in f.locations ) {
        var location = new google.maps.LatLng( f.locations[i].latitude, 
            f.locations[i].longitude );
        var args = {
            position : location,
            map : googleMap,
        };
        var marker = new google.maps.Marker(args);
        var infoBox = config.infoBox;
        var msg = config.infoBox;

        for( var x in propertyList ) {
            var myExp = new RegExp('{{'+propertyList[x]+'}}');
            if( myExp.test(msg) && typeof(f.locations[i][propertyList[x]]) != 'undefined' && f.locations[i][propertyList[x]] != "" ) 
                msg = msg.split('{{'+propertyList[x]+'}}').join(f.locations[i][propertyList[x]]);
            else if( myExp.test(msg) )
                msg = msg.split('{{'+propertyList[x]+'}}').join('');
        }

        setMessage(marker,msg);
    }

}

function setMessage(marker, msg) {
    var infoWindow = new google.maps.InfoWindow({ content : msg });
    google.maps.event.addListener(marker,'click',function(){
        if ( openBoxes.length > 0 )
            openBoxes.pop().close();
        infoWindow.open(googleMap,marker);
        openBoxes.push( infoWindow );           
    });
}

更新:好吧，我发现如果我设置 draggable : false 它会阻止 map 平移。现在我可以弄清楚如何在我触摸并拖动 map 时让页面滚动，我会很高兴。

更新:知道了!我将触摸事件附加到谷歌地图容器“ map ”并且成功了!

更新:实际上，我仍然做不到。它在我的桌面上运行良好，但在我的 iPhone 上却不行。它可以让我很好地上下滚动，但我似乎无法点击任何标记。在我的桌面上，效果很好。页面上下滚动，我可以点击我的图标。我注意到我的标记图标上的点击事件似乎没有触发。一定有什么东西在阻止它。

最佳答案

我明白了!虽然我不确定为什么会这样。

我通过将 map 参数设置为 false 然后将触摸事件添加到 map 容器来解决我最初的问题，当我上下移动手指时， map 容器会上下滚动页面。然而，这引入了一个新问题，因为现在我不能再点击标记了。为了让我点击标记并获得信息窗口，我必须点击屏幕上的任意位置。问题不是发生在 Droid 上，而是发生在 iPhone 上。另外，我注意到如果我将 map 移到屏幕的左上角，问题就不会发生。

在办公室周围的各种 iPhone 上进行测试后，从 iPhone 3G - 4 到 iOS 3.1 - 4.2，我发现当我得到客户当前的地址时，问题似乎就来了。

为了获取客户的当前位置，我首先尝试使用 iPhone 和 Android 浏览器自带的“获取当前位置”弹出窗口。如果他们单击“不允许”，则他们可以输入邮政编码并以这种方式获取。

每次我尝试通过表单提交而不是从弹出窗口使用我的当前位置时，问题似乎都会发生，所以我将调试工作集中在了这个问题上。

获得该邮政编码后，我需要将其转换为纬度/经度。最初，我为我的插件设置了它来查询我制作的名为 dataManager.php 的 php 脚本。经理程序将获取 zip 并向 google maps 发出 curl 请求以将其转换为邮政编码。然后它将转换后的位置返回给我的插件。

我没有意识到您可以直接从 google map API 对邮政编码进行地理编码。我所知道的就是我可以运行查询的那个 url。因此，我编辑了我的代码以使用 API 进行地理编码，并让该进程正常运行其余部分。

工作起来很有魅力。现在我点击标记，信息窗口就出现了。虽然，我仍然不确定为什么会修复它。这些事情得到处理的顺序没有改变。数据没有什么不同。唯一不同的是第一步。也许这是一个时间问题。 API 调用比发出两个 HTTP 请求跃点要快得多。

关于javascript - 谷歌地图 API；抑制 map 平移以启用页面滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5596781/