Question

我有一个运行本地的应用程序（WebApp）（当然）。但是，我可以建议用户下载应用程序，但在运行应用程序时并不总是有3G / WiFi。因此，当用户没有互联网连接时，谷歌地图将无法加载，因为它需要网络API。

作为后备，我想在无法加载地图时显示图像（'screenshot'）。

什么是最合适的解决方案？谢谢！

整个地图画布在这些代码片段的帮助下工作

HTML

<div id="map-canvas"></div>

CSS

#map-canvas { 
width:100%;
height:200px;
}

的Javascript

    function initialize() {
  var myLatlng = new google.maps.LatLng(51.81199,4.66656);
  var mapOptions = {
    zoom: 9,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
// END OF GOOGLE MAPS //

外部Google API脚本

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Answer 1

您不会使用以下行：

google.maps.event.addDomListener(window, 'load', initialize);

在window.onload，您会检查google.maps是否存在，然后使用if/else语句在条件之间切换 - initialize，或者在地图中加载图片地点。类似的东西：

window.onload = function () {
  var foundGoogle, img;
  foundGoogle = typeof google === 'object' && typeof google.maps === 'object';
  if (foundGoogle) {
    initialize();
  } else {
    img = new Image();
    img.src = 'screenshot.png';
    document.getElementById('map-canvas').appendChild(img);
  }
}

没有互联网连接加载谷歌地图画布时的图像后备

1 个答案: