Javascript 地图不随单张显示_Javascript_Html_Cordova_Leaflet

Javascript 地图不随单张显示

javascript html cordova leaflet

Javascript 地图不随单张显示,javascript,html,cordova,leaflet,Javascript,Html,Cordova,Leaflet,我对开发引入地图的应用程序是完全陌生的。我正在使用ApacheCordova、Javascript、HTML5和传单开发一个移动应用程序。在index.html页面上，我需要在页面上显示地图。我在地图页面上有一个DIV，但地图不显示。我在几个不同的模拟器中尝试过，但没有成功。我已经确保imgsrc属性允许从正确的资源中提取图像。我也尝试了一些不同的免费供应商。最后，我将javascript代码从index.html文件的底部移动到index.js文件中的ondevicerady（）处理程序。这两

我对开发引入地图的应用程序是完全陌生的。我正在使用ApacheCordova、Javascript、HTML5和传单开发一个移动应用程序。在index.html页面上，我需要在页面上显示地图。我在地图页面上有一个DIV，但地图不显示。我在几个不同的模拟器中尝试过，但没有成功。我已经确保imgsrc属性允许从正确的资源中提取图像。我也尝试了一些不同的免费供应商。最后，我将javascript代码从index.html文件的底部移动到index.js文件中的ondevicerady（）处理程序。这两个文件的代码如下。有人能告诉我为什么我的地图没有显示吗？我遵循我看过的例子，从我所能说的来看，它看起来不错，但这并不意味着什么。任何帮助都将不胜感激。谢谢

index.js文件：

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        //var element = document.getElementById("deviceready");
        //element.innerHTML = 'Device Ready';
        //element.className += ' ready';

        var myMap = L.map('map').setView([38.92940492128304, -94.66508077838485], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                maxZoom: 19
            }).addTo(myMap);

        //L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        //    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        //    maxZoop: 18,
        //    id: 'your.mapbox.project.id',
        //    accessToken: 'your.mapbox.public.access.token'
        //}).addTo(myMap);
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
    } )();

<!DOCTYPE html>
<html>
    <head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; media-src *; font-src 'self' https://fonts.gstatic.com; script-src 'self' 'unsafe-inline'; img-src 'self' data: *.tile.openstreetmap.org *.openstreetmap.org">

        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" type="text/css" href="css/leaflet.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap-cyborg.css" />

        <title>MockupsForLis</title>
    </head>
    <body>
        <div class="header">
            ...
        </div>

        <div id="map"></div>

        <footer>
           ...
        </footer>


        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>

        <script type="text/javascript" src="scripts/leaflet-src.js"></script>

        <script src="scripts/jquery-2.2.2.min.js"></script>
        <script src="scripts/bootstrap.js"></script>
    </body>
</html>

<代码> //对于空白模板的介绍，请参阅下列文档： // http://go.microsoft.com/fwlink/?LinkID=397704 //要在Ripple或Android设备/模拟器的页面加载上调试代码，请启动应用程序，设置断点， //然后在JavaScript控制台中运行“window.location.reload（）”。（功能（）{ “严格使用”； document.addEventListener（'devicerady'，ondevicerady.bind（this），false）；函数ondevicerady（）{ //处理Cordova暂停和恢复事件 document.addEventListener（'pause'，onPause.bind（this），false）； document.addEventListener（'resume'，onResume.bind（this），false）； //TODO:已加载Cordova。请在此处执行任何需要Cordova的初始化。 //var元素=document.getElementById（“deviceready”）； //element.innerHTML='设备就绪'； //element.className+='ready'； var myMap=L.map（'map'）.setView（[38.92940492128304，-94.66508077838485]，13）； L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'， { 属性：“©；”，最大缩放：19 }).addTo（myMap）； //L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token={accessToken}'{ //属性：“地图数据©；贡献者，图像©”， //maxZoop:18， //id:'your.mapbox.project.id'， //accessToken:'your.mapbox.public.access.token' //}).addTo（myMap）； }; 函数onPause（）{ //TODO:此应用程序已挂起。请在此处保存应用程序状态。 }; 函数onResume（）{ //TODO:此应用程序已重新激活。请在此处还原应用程序状态。 }; } )(); index.html文件：

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        //var element = document.getElementById("deviceready");
        //element.innerHTML = 'Device Ready';
        //element.className += ' ready';

        var myMap = L.map('map').setView([38.92940492128304, -94.66508077838485], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                maxZoom: 19
            }).addTo(myMap);

        //L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        //    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        //    maxZoop: 18,
        //    id: 'your.mapbox.project.id',
        //    accessToken: 'your.mapbox.public.access.token'
        //}).addTo(myMap);
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
    } )();

<!DOCTYPE html>
<html>
    <head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; media-src *; font-src 'self' https://fonts.gstatic.com; script-src 'self' 'unsafe-inline'; img-src 'self' data: *.tile.openstreetmap.org *.openstreetmap.org">

        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" type="text/css" href="css/leaflet.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap-cyborg.css" />

        <title>MockupsForLis</title>
    </head>
    <body>
        <div class="header">
            ...
        </div>

        <div id="map"></div>

        <footer>
           ...
        </footer>


        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>

        <script type="text/javascript" src="scripts/leaflet-src.js"></script>

        <script src="scripts/jquery-2.2.2.min.js"></script>
        <script src="scripts/bootstrap.js"></script>
    </body>
</html>


模拟穹窿
...
...

根据mattesCZ的上述评论，我决定将map DIV上定义的高度从百分比更改为像素，并且地图显示完全没有问题。

您看到控制台中有错误吗？控制台中没有错误。您能确认OnDevicerady正在实际启动吗？如include a console.log。地图是否定义了高度？如果没有，请尝试将其设置为固定高度，如200px:

。否则，jsFiddle或plunker可能会帮助我们解决您的问题。@mattesCZ-是的，地图的高度定义为100%。对于kicks，我决定把它改成200px，就像你做的那样，而且它起作用了。显然，它不喜欢定义为百分比的高度。非常感谢你的帮助。谢谢