[英]Jquery Mobile not loading multiple instance of google maps
我在一個帶有jQuery mobile的cordova項目中工作,我需要多個地圖。 問題在於,當加載地圖時,另一個地圖卻沒有,我知道那是因為我在需要時會觸發API,但無法使它適用於多個地圖。
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
app.initialize();
init = function() {
var viafin = {lat: -38.0183981, lng: -57.5428156};
var brut = {lat: -26.976732, lng: -48.638033};
/*
var sivara = {lat:, lng:};
var hmplaza = {lat:, lng:};
var hamburgo = {lat:, lng:};
*/
var image = 'img/map_marker.png';
var map2 = new google.maps.Map(document.getElementById('map_brut'), {
zoom: 14,
center: brut,
disableDefaultUI: true
});
var map = new google.maps.Map(document.getElementById('map_viafin'), {
zoom: 14,
center: viafin,
disableDefaultUI: true
});
var marker2 = new google.maps.Marker({
position: brut,
map: map2,
icon: image
});
var marker = new google.maps.Marker({
position: viafin,
map: map,
icon: image
});
}
function callmap() {
if (typeof google === 'object' && typeof google.maps === 'object') {} else {
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCKxYBGN7mcxj81NbByKBCvsEWJhIYOmEU&callback=init";
}
}
$(document).on('pageshow', '#nosotros',function(event){callmap()});
$(document).on('pageshow', '#hotel1',function(event){callmap()});
$(document).on('pageshow', '#hotel2',function(event){callmap()});
$(document).on('pageshow', '#hotel3',function(event){callmap()});
$(document).on('pageshow', '#hotel4',function(event){callmap()});
$(document).ready(function(){
var video = document.getElementById('video');
var source = document.createElement('source');
source.setAttribute('src', 'http://hoffmannestudio.com/viafin/etd.mp4');
$("#vtitulo").html("Elegi tu destino");
video.appendChild(source);
$("#video1").click(function(){
video.pause();
$("#vtitulo").html("Elegi tu destino");
$("#video").attr("poster", "img/fiestas.jpg");
source.setAttribute('src', 'http://hoffmannestudio.com/viafin/etd.mp4');
video.load();
});
$("#video2").click(function(){
video.pause();
$("#vtitulo").html("Eclipse Savana");
$("#video").attr("poster", "img/camboriu.jpg");
source.setAttribute('src', 'http://hoffmannestudio.com/viafin/es.mp4');
video.load();
});
});
您沒有發布CSS,但是我想您已經知道了(來自Google Maps文檔):
/ *始終明確設置地圖高度,以定義包含地圖的div元素的大小。 * /
除此之外,問題在於應使用哪個JQM事件來顯示地圖。 我建議使用pageshow
事件,因為此時,可見的地圖容器具有所需的大小。 然后,只需跟蹤哪些地圖已經被初始化,就可以避免多次下載腳本,也可以避免多次創建地圖。
為了實現您想要的,會有很多可能性,我的建議如下:
有兩頁的示例:
<div data-role="page" id="page-viafin">
<div role="main" class="ui-content">
<div id="map_viafin" class="map"></div>
</div>
</div>
<div data-role="page" id="page-brut">
<div role="main" class="ui-content">
<div id="map_brut" class="map"></div>
</div>
</div>
地圖容器的CSS(根據需要更改大小):
.map {
width: 300px;
height: 300px;
}
JavaScript:
/* Separate initialization for each map */
function init_viafin() {
var viafin = {lat: -38.0183981, lng: -57.5428156};
var map = new google.maps.Map(document.getElementById('map_viafin'), { zoom: 14, center: viafin });
var marker = new google.maps.Marker({ position: viafin, map: map });
}
function init_brut() {
var brut = {lat: -26.976732, lng: -48.638033};
var map = new google.maps.Map(document.getElementById('map_brut'), { zoom: 14, center: brut });
var marker = new google.maps.Marker({ position: brut, map: map });
}
/* Download & initialize map, or just only initialize map */
function callmap(map) {
if (typeof google === 'object' && typeof google.maps === 'object') {
map();
} else {
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
script.src = "https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY]&callback="+map.name;
}
}
/* Keep track of which maps have been already initialized */
var cases = { "page-viafin": init_viafin, "page-brut": init_brut};
/* Use pageshow, as you already did in your post */
$(document).on("pageshow", function(e) {
var pageId = e.target.id;
if(cases[pageId]) {
callmap(cases[pageId]);
cases[pageId] = null;
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.