Question

我在这里不知所措。除非我刷新，否则当我链接到谷歌地图时，我的谷歌地图将无法加载。我能在其他地方找到同样的问题，但作者似乎找到了一个对我不起作用的解决方案（或者我不知道如何实现他的解决方案）

我有两个页面，每个页面都显示一个谷歌地图。

当我打开第一页时，最初会显示地图。但是，当我打开（通过单击链接）第二页时，直到我刷新页面才会显示地图。当我从第二页打开到第一页时，我遇到了同样的问题。然后我创建了第三个页面，没有链接回第一页的地图。当我从第一页打开第三页然后再打开时，第一页地图显示正常。（我认为它打开了缓存的页面？）但是，如果我从第一页打开第二页，我必须刷新以在第二页上看到地图，然后当我从第二页打开第三页时，然后从第三页开始回到第一页，第一页地图无法打开，直到我刷新。

如果我从第一页到第二页，第二页再到第三页而没有刷新第二页，第一页从第三页开始没有任何问题，地图显示。同样，我认为这是因为地图本身是缓存的。

我只是不知道如何解决这个问题。

我尝试在下面的一个答案中建议添加延迟;我已经尝试将脚本的初始化部分移到</body>标记之前;我尝试从其他找到的解决方案中添加一行代码。我也尝试在第二张地图上重命名变量，但所有这一切都是为了阻止我的地图完全显示。

以下是我第一页的代码：

<!DOCTYPE html>
<html>
<head>
<title>Mt. Zion Cemetery</title>

<meta name="viewport" content="minimal-ui, user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

<style>
</style>
<link href="css/mtzion.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
     var myLatlng = new google.maps.LatLng(39.0474807,-87.4794325);
    var map_options = {
      center: myLatlng,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
       disableDefaultUI: true,
       zoomControl: true,
       mapTypeControl: true,
       mapTypeControlOptions: {
           style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
           position: google.maps.ControlPosition.RIGHT_BOTTOM
       }
    }
    var map = new google.maps.Map(map_canvas, map_options)
     var marker = new google.maps.Marker({
         position:myLatlng,
         map: map,
         animation: google.maps.Animation.DROP,
         title:"Mt. Zion Cemetery",
     });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>

<div id="map_canvas"></div>

<header>
    Mt. Zion Cemetery
</header>

<article>

    <a href="location.html">2nd map page</a>

</article>

<footer>
    <a href="maptest.html">blank page with return to home</a><
</footer><!-- /footer -->

</body>
</html>

以下是我的第二页的代码：

<!DOCTYPE html>
<html>
<head>
<title>Mt. Zion Cemetery</title>

<meta name="viewport" content="minimal-ui, user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

<style>
</style>
<link href="css/mtzion.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
     var myLatlng = new google.maps.LatLng(39.048079, -87.479784);
    var map_options = {
      center: myLatlng,
      zoom: 22,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
       disableDefaultUI: true,
       zoomControl: true,
       mapTypeControl: true,
       mapTypeControlOptions: {
           style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
           position: google.maps.ControlPosition.RIGHT_BOTTOM
       }
    }
    var map = new google.maps.Map(map_canvas, map_options)
     var marker = new google.maps.Marker({
         position:myLatlng,
         map: map,
         title:"grave locator",
     });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>

<div id="map_canvas"></div>

<header>
    Grave Locator
</header>

<article>

    <a href="index.html">Page Footer</a>

</article>

<footer>
    <a href="maptest.html">blank page with return to home</a><
</footer>

</body>
</html>

任何人都可以在我的代码/脚本中看到错误吗？

Answer 1

尝试：3 ... 替换它：google.maps.event.addDomListener(window, 'load', initialize);

到

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

地图不会加载页面，但会刷新

1 个答案: