使用 jquery 移动页面创建事件的传单初始化很奇怪

Question

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

当我从 $(document).on('pagecreate') 事件初始化地图时，地图开始时是一个非常小的层，位于浏览器的左上角，如果我调整浏览器的大小稍等一下，地图就会弹出全屏并停留在那里。

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

据我了解，使用 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

On the other hand, when i init the map from a window.onload-event - everything inits perfect.

您需要使用 onload。它的要点是像 pagecreate 和 ready（也称为 $(function(){}) 这样的事件在页面内容加载但页面未布局时触发 - 您的浏览器不知道但是地图的大小是多少。Leaflet 需要那个大小才能绘制地图，并且由于 pagecreate 没有让它知道，它会绘制一个微小的裁剪地图，如您当前所见。

使用 jquery 移动页面创建事件的传单初始化很奇怪

Leaflet Initialization is strange using jquery mobile pagecreate-event

initialization

leaflet