jQuery Mobile无法加载多个Google地图实例

Question

我在一个带有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();
  });
});

Answer 1

您没有发布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;
    }
});