1

好的，我尝试使用谷歌地图作为背景等，但由于 V3 更新，所有这些都失败了。谁能帮我解决我的问题？

无论如何，我想要一个 900 像素宽的居中网页，并且在网页中居中，当您滚动时，只会出现更多地图。

索引.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0                                                              Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head>

    <title>test</title> 

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <meta property="og:description" content="test." />
    <meta property="og:image" content="http://wadehammes.com/dewey-beach/map-thumb.JPG" />



    <link href="main.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Share:700' rel='stylesheet' type='text/css'> 

    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=false" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript" src="map.js"></script>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    <style type="text/css" media="screen">
        iframe { vertical-align: top; }
    </style>
</head>



<body onload="initialize()" onunload="GUnload()">
    <!-- Using the Little Web Things jQuery Countdown -     http://www.littlewebthings.com/2010/02/jquery-countdown-script/ -->

    <div class="content">
        <h1>Test</h1>   
        <p>Welcome</p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam         molestie, purus eu euismod semper, tellus dolor placerat erat, eu egestas tortor justo eget elit. Sed dolor orci, gravida nec lacinia eu, bibendum vitae lectus. Phasellus luctus interdum malesuada. Sed in nibh a felis mattis euismod fermentum eu lectus. Donec non risus diam, in ullamcorper orci. Fusce pulvinar sapien nec turpis aliquet pellentesque. Nunc id nisl vel est ultrices sollicitudin. Cras tempor posuere condimentum. Aenean viverra, mauris a volutpat congue, sem urna placerat mi, eu ultricies sem nunc sed metus. In vel nibh enim. Suspendisse lacinia dui ac nisl placerat at pulvinar ipsum aliquet.
        <br />
        <br />
        Aenean vitae purus elit, at mattis elit. Suspendisse odio massa, tempus ac dignissim eu, pretium in lectus. Nullam sed diam ipsum, nec mollis urna. Cras vestibulum ante et tortor hendrerit eget consequat mi sollicitudin. Duis porttitor tempus mi, eget pharetra nunc facilisis at. In ipsum risus, ullamcorper in accumsan non, porttitor quis sem. Donec nibh libero, porta vel tincidunt ut, congue semper eros. Nulla facilisi. Praesent vitae urna ut diam laoreet tincidunt. Quisque vestibulum pulvinar ipsum, quis consequat metus porta sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dignissim sem nec nulla tempus imperdiet.
        <br />
        <br />
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque non nisl purus, nec adipiscing sem. Etiam commodo augue et tortor egestas tempus. Sed a felis sapien. Ut et orci vel elit rutrum consectetur sed sed elit. Etiam vel turpis velit, non luctus nisl. Donec in purus sed sem suscipit posuere. Praesent laoreet scelerisque fringilla. Etiam blandit vehicula sem, quis consequat dui auctor sodales. Phasellus varius, elit sed tincidunt egestas, leo velit ultrices diam, quis ullamcorper enim nisi sed arcu. Duis magna nulla, tempor id faucibus nec, volutpat vitae leo. Donec mattis velit in tortor laoreet ornare. Nullam facilisis tortor sit amet dui scelerisque fermentum. Nam augue sem, suscipit vitae tincidunt in, auctor aliquam tortor. Vestibulum vel est et mi porta sollicitudin.
        <br />
        <br />
        Proin lectus magna, viverra eu scelerisque non, accumsan adipiscing purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut nulla turpis. Etiam convallis mi et nibh faucibus ullamcorper. Nunc eu metus consequat nunc laoreet convallis. Praesent purus augue, sodales sed rutrum quis, facilisis vel sapien. Curabitur sed risus sapien. Suspendisse sagittis, nulla at semper lacinia, metus augue lacinia ipsum, ut fermentum tellus est in magna. Morbi consectetur dolor mi.
        <br />
        <br />
        Vestibulum vitae lacus non nisi viverra ultricies non in magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non quam id libero porttitor semper rhoncus quis justo. Phasellus tincidunt aliquet quam vel faucibus. Aliquam blandit sapien dapibus enim tempus viverra. Nunc eget risus id neque venenatis suscipit. Donec interdum augue fringilla nibh vulputate dignissim. Cras sollicitudin massa ullamcorper sem accumsan eu auctor dolor scelerisque. Sed iaculis dictum risus ut rutrum. Aliquam erat volutpat. Sed interdum dictum sapien at pulvinar.
        <br />
    </div>


    <!--Map Background-->
    <div id="map_canvas" style="position: absolute; top: 0; bottom: 0; left: 0;     right: 0; z-index: 100;"></div> 



</body>



</html>

地图.js：

/*Google Maps API V3  */
function initialize() {
var centerLng = new google.maps.LatLng(38.693482,-75.057564);
var myOptions = {
  zoom: 8,
  center: centerLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

var markerLng = new google.maps.LatLng(38.693281,-75.075159);
var marker = new google.maps.Marker({
  position: markerLng, 
  map: map, 
  title:"Hello World!"
}

主.css：

/* CSS FOR DEWEY BEACH SITE */
body:before {
      content: "";
      position: fixed;
      top: -10px;
      left: 0;
      width: 100%;
      height: 10px;

      -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                     box-shadow: 0px 0px 10px rgba(0,0,0,.8);

      z-index: 102;
}


div#map_canvas {  
position: absolute;
position: fixed; 
height:1300px;
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
z-index: 0;
}

iframe { vertical-align: top; }

.content{

font-family: 'Helvetica Neue' Helvetica, arial, sans-serif; 
z-index: 101;
    background-color: black;
color: white;
padding: 25px;
position: absolute; left: 50%;
    width: 900px;
    height: 1200px;
    margin: auto;
margin-left: -475px; /* half the value of the width */

};
}

.little {
font-size: 11pt;
font-family: 'Helvetica Neue' Helvetica, arial, sans-serif;
text-shadow: none;
color: #2e4352;
text-shadow: 0px 1px 1px #77a0bc;
line-height: 1.4em;
}

.little a {
text-decoration: none;
color: #2e4352;
text-shadow: 0px 1px 1px #77a0bc;
}

.little a:hover {
color: #212121;
}

#wh-app {
position: absolute;
left: 0;
top: 0;
z-index: 4000;
}

#top_right{
background-color: white;
}

看到这些都不起作用：/ 对不起，草率的代码，我无法让它正确显示。

我已经尝试并使用了这个：http ://blog.wadehammes.com/post/3837158298 ，但它仍然无法正常工作。

4

0 回答 0