Google Maps API; 禁止地图平移以启用页面滚动

Question

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

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

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

这是该页面的链接:

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它会阻止地图平移.现在我可以弄清楚当我触摸并拖动地图时如何让页面滚动我会很高兴.

更新:知道了!我将触摸事件附加到谷歌地图容器"地图",这是有效的!

更新:实际上,我仍然不足.它在我的桌面上工作很好,但不在我的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 请求跃点要快得多。