[英]Map not displaying with Leaflet
I am completely new to developing applications that bring in maps. 我对开发引入地图的应用程序完全陌生。 I am developing a mobile application using Apache Cordova, Javascript, HTML5, and Leaflet. 我正在使用Apache Cordova,Javascript,HTML5和Leaflet开发移动应用程序。 On the index.html page, I need to display a map on the page. 在index.html页面上,我需要在页面上显示地图。 I have a DIV on the page for the map but the map does not display. 我在地图页面上有一个DIV,但地图不显示。 I have tried it in a few different emulators with no luck. 我已经在一些不同的模拟器中尝试过了,但是没有运气。 I have made sure that the img-src attribute allows for images to be pulled in from the correct resource. 我确保img-src属性允许从正确的资源中提取图像。 I have also tried a few different free providers. 我还尝试了一些不同的免费提供商。 Lastly, I moved the javascript code from the bottom of the index.html file to the onDeviceReady() handler in the index.js file. 最后,我将javascript代码从index.html文件的底部移至index.js文件中的onDeviceReady()处理程序。 My code for the two files are below. 我的两个文件代码如下。 Can anyone tell why my map isn't showing? 谁能说出为什么我的地图没有显示? I have followed the examples I viewed and it looks fine from what I can tell, but that doesn't mean a thing. 我已经按照我看过的示例进行了操作,从我看来,它看起来还不错,但这并不意味着什么。 Any help would be greatly appreciated. 任何帮助将不胜感激。 Thanks. 谢谢。
index.js file: 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: '© <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 © <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 file: 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>
鉴于上述mattesCZ的评论,我决定将地图DIV上定义的高度从百分比更改为像素,并且地图显示完全没有问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.