对编程这一方面来说是真正的新手,但试图让我的脚湿透。
我创建了一个地图,让它显示并正常运行没有问题,但是当我尝试将相同的地图放在不同的页面上时,它不会显示地图。它为地图创建了一个空间,但我看不到它。
只有在以下情况下,我才能在第二页上加载地图:我将它放在我的代码中的原始地图页面之前。
如何让地图在两个页面上都显示?
相关脚本:
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 -->