Question

我想在我的网站上有一个谷歌地图，但如果我先打开index.html并导航到map.html，地图就不会显示。

但如果我在map.html时直接打开map.html或刷新浏览器窗口，则会显示地图。

从index.html导航到map.html时，地图如何显示？

我正在使用standalone Pjax JavaScript module v0.1.4 stable（没有jquery）。

我在示例代码中添加了document.write("rendered at: "+ Date.now())以便更好地理解。

的index.html

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link rel= "stylesheet" type="text/css" href="style.css"/>
  <script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
  <script type="text/javascript" src='example.js'></script>
</head>
<body>
  <div class="col-sm-2">
    <div class="list-group dynamic">
      <a href="index.html" class="list-group-item active">Start</a>
      <a href="map.html" class="list-group-item">Map</a>
    </div>
  </div>
  <div class="col-sm-10">
    <h1>STATIC HEADING</h1>
    <script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
    <div class="dynamic">
      <h4>this is a dynamic line, this is site 1</h4>
    </div>
  </body>
  </html>

map.html

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link rel= "stylesheet" type="text/css" href="style.css"/>
  <script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
  <script type="text/javascript" src='example.js'></script>
</head>
<body>
  <div class="col-sm-2">
    <div class="list-group dynamic">
      <a href="index.html" class="list-group-item">Start</a>
      <a href="map.html" class="list-group-item active">Map</a>
    </div>
  </div>
  <div class="col-sm-10">
    <h1>STATIC HEADING</h1>
    <script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
    <div class="dynamic">
      <h4>this is a dynamic line, this is the map site</h4>
      <!-- map is not displayed currently -->
      <script src="https://maps.googleapis.com/maps/api/js"></script>
      <script>
        function initialize() {
          var mapCanvas = document.getElementById('map-canvas');
          var latLng = new google.maps.LatLng(50.0, 10.0)
          var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
          var map = new google.maps.Map(mapCanvas, mapOptions)
        }
        google.maps.event.addDomListener(window, 'load', initialize);
      </script>
      <div id="map-canvas"></div>
    </div>
  </div>
</body>
</html>

的style.css

#map-canvas {
  width: 90%;
  height: 500px;
}

example.js

  document.addEventListener("DOMContentLoaded", function() {
  var pjax = new Pjax({
    selectors: [".dynamic"]
  })
  console.log("Pjax initialized.", pjax)
})

Answer 1

将样式明确地分配给地图div地图工作..可能是你在style.css的路径中有错误

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link rel= "stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
    <script type="text/javascript" src='example.js'></script>
  </head>
  <body>
    <div class="col-sm-2">
      <div class="list-group dynamic">
        <a href="index.html" class="list-group-item">Start</a>
        <a href="map.html" class="list-group-item active">Map</a>
      </div>
    </div>
    <div class="col-sm-10">
      <h1>STATIC HEADING</h1>
      <script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
      <div class="dynamic">
        <h4>this is a dynamic line, this is the map site</h4>
        <div id="map-canvas" style="width:90%; height:500px;"></div>
      </div>
    </div>          
    <!-- map is not displayed currently -->
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var latLng = new google.maps.LatLng(50.0, 10.0)
        var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <script type="text/javascript" src='example.js'></script>
  </body>
</html>

从其他页面导航时，Google Map无法与Pjax一起使用

1 个答案: