Question

暂时玩这个bug，所以决定在这里提出这个问题..

我正在使用Google Maps API开发移动页面，在这里显示一些标记和一些折线，一切都运行良好。这是我在我的电脑，Chrome移动工具甚至手机（摩托罗拉3G）上使用页面的时候..

但是当我尝试在iPad 4 iOS v10.3.3上使用此页面时，我无法使用两个手指缩放或无法滚动地图视图。在iPad上尝试使用Safari和Chrome，两者都有同样的问题。我在SO＆amp;中看了很多帖子。谷歌并尝试了这一点并尝试了这一点，但迄今为止没有任何帮助。

我不知道为什么会这样，当我只是创建新的HTML文档并初始化Google Map（从他们的文档中复制并粘贴“hello world”示例）时，它在iPad上运行得很好。

所以我最好的猜测是我们系统某些部分的CSS / JS会干扰谷歌地图并以某种方式导致这种行为..但我不知道它可能是什么或如何追踪它。或者也许是别的东西。

首先我认为它可能是一些Z-index的东西，其中一些不可见的元素是“阻塞”地图，但在iPad上查看地图并非都没有响应;当我用手指“敲击”两次时，地图会放大。另外，如果我点击某个标记我已添加它将打开InfoWindow，如所设想的那样。所以它部分有效。

我还禁用了所有标记和用户位置以进行调试。现在只需加载普通地图。

我无法分享太多代码，但我会尽量分享。

这是我初始化地图的方式：

    var myStyles = [{
        featureType: "poi",
        elementType: "labels",
        stylers: [
            { visibility: "off" }
        ]
    }];

    this.map = new google.maps.Map(document.getElementById('gps-map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 16,
        center: {lat: 62.260993, lng: 25.789094},
        styles: myStyles,
        disableDefaultUI: false,
        //gestureHandling: 'cooperative',
        draggable:true
    });

这是我的HTML

<div data-role = "page" id = "gpsverkosto_container" data-dom-cache="false">
    <div id="main" role = "main">
            <div id="gps-map"></div>
    </div>
</div>

和CSS

#gps-map {
    height: 100%;
}

div[role="main"] {
    position: absolute;
    top: calc((115px) + 5px);
    left: 0;
    width: 100vw;
    height: calc(100% - 115px);
}

.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    position: absolute;
    display: none;
    border: 0;
}

如果我取消注释那个gestureHandling，加载地图并尝试在iPad上移动地图，地图会告诉我用两根手指移动。但即使我用两根手指，它也不会移动或缩放。

最有趣的是它在我试过的其他设备上运行得很好..

有什么建议吗？感谢所有帮助。

iPad + Google Map两个手指在地图上缩放或滚动

0 个答案: