2

对编程这一方面来说是真正的新手,但试图让我的脚湿透。

我创建了一个地图,让它显示并正常运行没有问题,但是当我尝试将相同的地图放在不同的页面上时,它不会显示地图。它为地图创建了一个空间,但我看不到它。

只有在以下情况下,我才能在第二页上加载地图:我将它放在我的代码中的原始地图页面之前。

如何让地图在两个页面上都显示?

相关脚本:

  var map;
  function initialize() {
  var myOptions = {
      zoom: 17,
      center: new google.maps.LatLng(45.628936,-122.672273),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);


var myMarkers = [
    ['angst', 45.629281,-122.671468, 4],
    ['northbank', 45.62911,-122.671468, 3],
    ['gallery360', 45.628144,-122.67245, 5],
    ['auroa', 45.629118,-122.671763, 5],    

  ];



  for (var i = 0; i < myMarkers.length; i++) {
      var newMarker = myMarkers[i];
      var markerLatLng = new google.maps.LatLng(newMarker[1], newMarker[2]);
      var marker = new google.maps.Marker({
          position: markerLatLng,
          map: map,
          title: newMarker[0],
          zIndex: newMarker[3]
      });

   }




 } //close initialize function



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

页面之所以有效,是因为它首先出现在代码中:

<div data-role="page" id="map" data-theme="a">

<div data-role="content" id="content" data-theme="a">   
    <div id="map_canvas"> </div>    
</div><!-- /content -->

<div data-role="footer" id="footer">    
    <div id="nav" data-role="navbar" >
        <ul>
            <li><a href="#galleries">Galleries</a></li>
            <li><a href="#shows">Shows</a></li>
            <li><a href="#map">Map</a></li>
        </ul>
    </div>
</div> <!-- end of footer-->

</div> <!-- end of #map page -->

我无法加载的页面,除非它在之前的代码之前进行了编码。

<div data-role="header" id="header" >
    <a href="index.html" data-role="home" data-icon="home"  id="homebutton" >Home</a>  <!--home button on header bar-->
    <h1>Gallery 360</h1>
</div> <!--end of the header div-->

<div data-role="content" id="gallerylist" data-theme="c">   

    <img src="images/360.jpg" class="pagebackground" />
    <div id="map_canvas"> </div>    
</div><!-- /content -->

<div data-role="footer" id="footer">    
    <div id="nav" data-role="navbar" >
        <ul>
            <li><a href="#galleries" >Galleries</a></li>
            <li><a href="#shows" >Shows</a></li>
            <li><a href="#map">Map</a></li>
        </ul>
    </div>
</div> <!-- end of footer-->
</div><!-- /page #g360 -->
4

1 回答 1

0

我也没有经验,但可能是因为你没有把“data-role='page'id=''”放在第二页

于 2012-10-15T09:11:19.973 回答