Как получить карту leaflet.js, работающую с jQuery mobile?

Question

Я пытаюсь получить карты leaflet.js, работающие с моим мобильным проектом jquery. Это своего рода работа, но совсем не то, что должно быть. Карта не имеет правильного размера и не приближается и не приближается.

я следовал документам здесь:

leafletjs.com

Я также нашел 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 в соответствии с docs - это 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 правильно. Поэтому я действительно вернусь к первому.

Я меняю линию, чтобы установить местоположение в Пуэрто-Вальярта, и удалите географическую линию местоположения кода.

Есть ли у кого-нибудь идеи, почему он не работает должным образом?

Answer 1

Я был в состоянии получить карты работают на инициирование карты с

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

Answer 2

Вы инициирование вам map этого путь

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

Вместо этого попробуйте инициализирующее это так

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

Здесь работает jsfiddle