Question

我一直在努力让leaflet.js地图与我的jquery移动项目一起工作。它有点工作，但根本不应该是什么。地图尺寸不正确，无法正确放大和缩小。

我按照这里的文档：

我还发现这个jsfiddle可以找到你的地理位置： jsfiddle

$(document).on('pageinit', '#index', function(){  
    var map = L.map('map');

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 16,
        attribution: 'Example made by <a href="http://www.gajotres.net">Gajotres</a>'
    }).addTo(map);

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    map.locate({setView: true, maxZoom: 18}); 

function onLocationFound(e) {
    var radius = e.accuracy / 2;

    L.marker(e.latlng).addTo(map)
    .bindPopup("You are within " + radius + " meters from this point").openPopup();

    L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
    alert(e.message);
}

});

我根据文档对js代码进行了两处更改是这个jsfiddle。它应该是墨西哥巴亚尔塔港的地图。它有点工作但不是真的。 my jsfiddle

$(document).ready(function() {  

    **// Changed this line**
    var map = L.map('map').setView([20.602237, -105.236859],15);  // Puerta Vallarta South Side

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 16,
        attribution: 'Example made by <a href="http://www.gajotres.net">Gajotres</a>'
    }).addTo(map);

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    **//Removed the below line**
    //map.locate({setView: true, maxZoom: 18});   


function onLocationFound(e) {
    var radius = e.accuracy / 2;

    L.marker(e.latlng).addTo(map)
    .bindPopup("You are within " + radius + " meters from this point").openPopup();

    L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
    alert(e.message);
}

});

修改我的jsfiddle现在通过替换

在jsfiddle中工作

$(document).on('pageinit', '#page_map_south_side', function(){

与

$(document).ready(function() {

但是，这不会改变我实际代码中的任何内容。我相信.on（'pageinit'）行在jsfiddle中无法正常工作。所以我真的回到原点。

我更改了该行以将位置设置为Puerto Vallarta并删除地理位置代码行。

有没有人知道为什么它不能正常工作？

Answer 1

我可以通过使用

启动地图来使地图正常工作

$(document).on('pageshow', '#page_map_south_side', function(){

Answer 2

你以这种方式map启动你

$(document).on('pageinit', '#index', function(){})

而不是尝试以这种方式初始化

$(document).ready(function(){})

这是有效的jsfiddle

如何让leaflet.js地图与jquery mobile一起使用？

2 个答案: