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

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

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

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

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

每次我尝试通过表单提交使用当前位置而不是弹出窗口时，问题似乎都在发生，所以我把调试工作集中在那里。

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

我没有意识到你可以直接从谷歌地图API中对邮政编码进行地理编码。我所知道的只是那个我可以运行查询的网址。因此，我使用API编写了代码以进行地理编码，让流程正常运行。

像魅力一样工作。现在我点击标记，信息窗口即将出现。虽然，我仍然不确定为什么要修复它。这些东西得到处理的顺序没有任何改变。数据没有不同。所有不同的是第一步。也许这是一个时间问题。 API调用比发出两个HTTP请求跃点要快得多。

Answer 2

你需要scrollwheel:false选项

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

2 个答案: