通过 Ratchet v2.0.2 加载外部地图脚本答案

【问题标题】：Loading external map script via Ratchet v2.0.2通过 Ratchet v2.0.2 加载外部地图脚本
【发布时间】：2014-09-15 14:02:37
【问题描述】：

我刚开始使用 Ratchet，它很棒。我正在开发一个带有 Ratchet 2.0.2 的 Phonegap 应用程序，使用 push.js 在页面之间进行转换。但我无法在其中运行外部 javascript。我检查了this

但我无法在其中加载 googlemap javascript v3。

我的 HTML 页面

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Movie finder</title>
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">

            <link rel="stylesheet" href="css/ratchet.min.css">
        </head>
        <body>
            <header class="bar bar-nav">
                <a class="btn btn-link btn-nav pull-left" href="interests.html" data-transition="slide-out">
                    <span class="icon icon-left-nav"></span>
                    Back
                </a>
                <h1 class="title">Map</h1>
            </header>
    <style>
          #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
        </style>
            <div class="content">
                <button class="btn" onClick="initialize();">click</button>
                <div id="map-canvas"></div>
            </div>
        </body>
        <script src="js/ratchet.min.js"></script>       
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script>
            function initialize() {
                var map;
                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(-34.397, 150.644)
                };
                map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
            }
           google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </html>

请帮我在棘轮中加载谷歌地图

【问题讨论】：

标签： javascript html cordova ratchet-2 ratchet-bootstrap

【解决方案1】：

您的地图位于地图容器中，当文档加载并初始化地图时，该容器的高度为 0 像素。给它一个高度，然后查看你的地图。

.content {height: 100%}

不需要初始化按钮。加载时初始化就足够了。

google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle.net/a910o99w/

【讨论】：

代码正在主页上运行。我想在我的联系我们页面中访问此地图。但遗憾的是它不起作用。
我确定它有点小。确保您在联系页面上加载 google maps js 文件，并检查控制台日志是否有错误。
棘轮使用 PUSH 功能。它可以防止外部脚本。我使用data-ignore="push" 来防止这种情况。但这不是更好的方法。我必须找到另一种方法来完成这项工作。因为当使用data-ignore时，它的过渡效果就没有了。
哦，对了。在您的窗口上注册一个事件侦听器以拦截在推送转换后触发的“推送”消息。 window.addEventListener('push', initialize);goratchet.com/components/#push
是的。现在我使用离子框架。因为 rachet 不能在某些手机中使用。我不知道为什么