Question

我很难在jquery移动项目中全屏初始化传单地图。

当我从$（文档）.on（'pagecreate'）启动地图时 - 地图以一个位于浏览器左上角的非常小的层开始，如果我只是调整浏览器的大小，地图弹出全屏并停留在那里。

另一方面，当我从window.onload-event初始化地图时 - 一切都很完美。

据我所知，使用pagecreate是首选，所以我想使用它。

的aspx：LeafletLoad.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LeafletLoad.aspx.cs" Inherits="RadikaleNu.LeafletLoad" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <title>Leflet load</title>
    <link href="Content/jquery.mobile-1.4.5.css" rel="stylesheet" />
    <link href="Content/leaflet.css" rel="stylesheet" />
    <link href="Content/leafletload.css" rel="stylesheet" />
    <!-- Javascript libraies -->
    <script src="Scripts/jquery-2.1.3.js"></script>
    <!--<script src="Scripts/jquery-2.1.3.min.js"></script>-->
    <script src="Scripts/jquery.mobile-1.4.5.js"></script>
    <script src="Scripts/leaflet-src.js"></script>
    <script src="Scripts/leafletload.js"></script>

</head>
<body>
    <form id="form1" runat="server">

        <div data-role="page" id="MapPage" >

            <div role="main" class="ui-map">
                <!-- Map -->
                <div id="map"></div>

            </div>   

        </div>

    </form>
</body>
</html>

Javascript：leafletload.js

var map = null;
var osm = null;


//This works perfectly - the map starts fullscreen
/*
window.onload = function () {
    InitMap();

};
*/

//This works not so perfectly - the leflet map starts very minimized in the top left corneruntil browser resize.
$(document).on('pagecreate', function(){  
    InitMap();
});

function InitMap() {
    // set up the map
    map = new L.Map('map');

    osm = new L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.{ext}', {
        subdomains: 'abcd',
        minZoom: 0,
        maxZoom: 20,
        ext: 'png'
    });

    // start the map in Copenhagen, Denmark
    map.setView(new L.LatLng(55.682665, 12.536639), 9);
    map.addLayer(osm);
}

CSS：leafletload.css

body { 
    margin: 0;
}

#map {
    height: 100%;
}

.ui-map {
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0px;
    left: 0;
    padding: 0 !important;
    }

Answer 1

另一方面，当我从window.onload-event初始化地图时 - 一切都很完美。

你想要使用onload。它的要点是，当加载页面内容但页面未布局时，pagecreate和ready（也称为$(function(){})等事件会触发 - 您的浏览器不知道但地图的大小是多少。传单需要这个大小才能绘制地图，因为页面创建不会让它知道，它会绘制一个当前看到的小的裁剪地图。

使用jquery mobile pagecreate-event，Leaflet初始化很奇怪

1 个答案: