Question

我对开发带有地图的应用程序完全陌生。我正在使用Apache Cordova，Javascript，HTML5和Leaflet开发移动应用程序。在index.html页面上，我需要在页面上显示一个地图。我在地图页面上有一个DIV但是地图没有显示。我在几个不同的模拟器中试过没有运气。我确保img-src属性允许从正确的资源中提取图像。我也尝试过几个不同的免费提供商。最后，我将javascript代码从index.html文件的底部移动到index.js文件中的onDeviceReady（）处理程序。我的两个文件的代码如下。有人能说出为什么我的地图没有显示出来吗？我已经按照我看到的例子进行了操作，从我能说的内容看起来很好，但这并不意味着什么。任何帮助将不胜感激。感谢。

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.
    };
    } )();

index.html文件：

<!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>

Answer 1

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

使用Leaflet不显示地图

1 个答案: