javascript - Jquery Mobile 不加载谷歌地图的多个实例

Question

我正在一个带有 jquery mobile 的 cordova 项目中工作，我需要多个 map 。问题是，当一张 map 加载时，另一张 map 不会加载，我知道那是因为我在需要时触发 API，但我无法使其适用于多个 map 。

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 map 文档):

/* Always set the map height explicitly to define the size of the div element that contains the map. */

除此之外，问题是应使用哪个 JQM 事件来显示 map 。我建议使用 pageshow 事件，因为此时， map 容器以所需的大小可见。然后，只需跟踪哪些 map 已经初始化，以避免多次下载脚本，也避免多次创建 map 。

会有很多可能性，要实现你想要的，我的建议如下:

两页示例:

  <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>

map 容器的 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;
    }
});