谷歌地图 API；禁止地图平移以启用页面滚动

Question

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

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

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

以下是该页面的链接：

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”并且有效！

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

Answer 1

我得到了它！虽然我不确定为什么会这样。

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

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

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

每次我尝试通过表单提交而不是通过弹出窗口使用当前位置时，似乎都会出现该问题，因此我将调试工作集中于此。

一旦我有了邮政编码，我需要将其转换为纬度/经度。最初，我为我的插件设置了它来查询我制作的名为 dataManager.php 的 php 脚本。管理器程序将获取邮政编码并向谷歌地图发出卷曲请求，以将其转换为邮政编码。然后它会将转换后的位置返回给我的插件。

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

工作起来就像一个魅力。现在我点击标记，信息窗口就会出现。尽管如此，我仍然不确定为什么会解决这个问题。这些事情的处理顺序没有任何改变。数据没有什么不同。唯一不同的是第一步。也许这是一个时间问题。 API 调用比进行两次 HTTP 请求跃点要快得多。

Answer 2

您需要在选项中使用 scrollwheel:false