Question

我一直在尝试在我的cordova应用中添加一个标签，其中会显示地图。我希望用户能够捏合放大和缩小图像并平移。我使用了最新的iScroll构建，但我无法正常工作。我最近遇到过这个演示

http://lab.cubiq.org/iscroll/examples/zoom/

这正是我希望我的应用程序在我的手机浏览器中运行的功能。但是，当我复制iscroll.js和这个演示的源代码并将其粘贴到我的应用程序中以通过cordova进行测试时，我无法放大我的Android手机或ios仿真器，只能平移。我在页面上实现了相同的目的，我实际上想要将其应用于：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript" src="js/iscroll.js"></script>

    <script type="text/javascript">
        var myScroll;
        function loaded() {
            myScroll = new iScroll('wrapper', { 
            zoom:true,
            onBeforeScrollStart:null,
            zoomMin:0.25,
            zoomStart:0.5,
            });
        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        document.addEventListener('DOMContentLoaded', loaded, false);

    </script>

    <style type="text/css">


    html {
    -ms-touch-action: none;
    }

    body {
    overflow: hidden;
    }

    #wrapper {
    position: absolute;
    z-index: 1;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    background: #ccc;
    overflow: auto;
    }

    #scroller {
    position:relative;
    background: #ccc;
    /*-webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);

    width:725px;
    padding:0;
    }

    img {
        -webkit-transform:translate3d(0,0,0);
    }
    </style>
</head>
<body Onload="loaded()">
    <ons-screen>
        <ons-navigator title="Map">
            <div id="wrapper">
                <div id="scroller">
                    <!--<iframe src="thing.html" style="width:100%; height:100%"></iframe>-->
                    <img src="img/map.png"></img>
                </ons-page>
            </div>
        </ons-navigator>
    </ons-screen>
</body>
<!--<script src="js/hammer.min.js"></script>
<script src="js/myLogic.js"></script>-->
</html>

如果有人可以帮我弄清楚为什么它在浏览器中有效，但在翻译成本机代码时没有，或者如何使其正常工作，我将永远负债。

iScroll不会放大cordova应用程序

0 个答案: