2016-11-04 104 views
-2

我已經將我的導航放置在手風琴按鈕/選項卡中,因爲我希望用戶能夠點擊該選項卡,並讓他們隨時查看導航。地圖和所有使用地圖的代碼是完全有效的,因爲當我在控制檯上測試它時沒有錯誤,但由於某些原因它仍然不顯示。我也使用了API Key。它只會在我用控制檯測試它時才起作用。爲什麼我點擊標籤時不顯示地圖?爲什麼我的地圖不顯示在Accordion選項卡中?

這是代碼我有我的地圖

<!doctype html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta charset = "utf-8"> 
    <title>London Tour Guide</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 

    <script src="jquery.js"></script> 

    <style> 
     div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px; 
      background-color: white; } 

     div.content { 
      width: 700px; height: 1200px; 
      background-color: lightblue; padding: 5px; } 

     h1.welcome {font-family: Verdana, sans-serif; color: orangered; 
      text-align: center; text-shadow: 2px 2px Grey; 
      transition: 4s;} 

     h1.stpauls{font-family: Verdana, sans-serif; color: orangered; 
      text-align: center; 
     } 

     h1.welcome:hover{transform: rotateX(360deg); color:yellow; } 

     p.medium { 
    font-size: 12pt; 
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
    color: #333; 
     } 

     p.small { 
    font-size: 12pt; 
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
    color: #333; 
     } 

     img { 
      display: block; 
      margin: auto; 
     } 



     ul { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      overflow: hidden; 
      background-color: #333; 
     } 

     li { 
      float: left; 
     } 

     li a, .dropbtn { 
      display: inline-block; 
      color: white; 
      text-align: center; 
      padding: 14px 16px; 
      text-decoration: none; 
     } 

     li a:hover, .dropdown:hover .dropbtn { 
      background-color: red; 
     } 

     li.dropdown { 
      display: inline-block; 

     } 

     .dropdown-content { 
      display: none; 
      position: absolute; 
      background-color: #f9f9f9; 
      min-width: 160px; 
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     } 

     .dropdown-content a { 
      color: black; 
      padding: 12px 16px; 
      text-decoration: none; 
      display: block; 
      text-align: left; 

     } 

     .dropdown-content a:hover {background-color: #f1f1f1} 

     .dropdown:hover .dropdown-content { 
      display: block; 
     } 


     .dropbtn1 { 
      background-color: #4CAF50; 
      color: white; 
      padding: 16px; 
      font-size: 16px; 
      border: none; 
      cursor: pointer; 
     } 


     .dropbtn1:hover, .dropbtn1:focus { 
      background-color: #3e8e41; 
     } 


     .dropdown1 { 
      position: relative; 
      display: inline-block; 
     } 


     .dropdown1-content { 
      display: none; 
      position: absolute; 
      background-color: #f9f9f9; 
      min-width: 160px; 
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     } 


     .dropdown1-content a { 
      color: black; 
      padding: 12px 16px; 
      text-decoration: none; 
      display: block; 
     } 


     .dropdown1-content a:hover {background-color: #f1f1f1} 

     .show{display:block;} 

     button.accordion { 
      background-color: #eee; 
      color: #444; 
      cursor: pointer; 
      padding: 18px; 
      width: 100%; 
      border: none; 
      text-align: left; 
      outline: none; 
      font-size: 15px; 
      transition: 0.4s; 
     } 

     button.accordion.active, button.accordion:hover { 
      background-color: #ddd; 
     } 

     div.panel { 
      padding: 0 18px; 
      display: none; 
      background-color: white; 
     } 

     div.panel.show { 
      display: block; 
     } 




    </style> 
</head> 
<body> 

<div class="container"> 
<div class = "content"> 

    <div class = "header"> 
     <img src = "headerlondon.jpg" alt = "header"></div> 

    <ul> 
     <li><a class="active" href="Project.html">Home</a></li> 
     <li><a href="Map.html">Maps </a></li> 
     <li class="dropdown"> 
      <a href="#" class="travel">Travel <i class="fa fa-caret-down"></i></a> 
      <div class="dropdown-content"> 
       <a href="Bus.html">Bus</a> 
       <a href="Taxi.html">Taxi</a> 
       <a href="Tube.html">Tube</a> 
      </div> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="sightseeing">SightSeeing <i class="fa fa-caret-down"></i></a> 
      <div class="dropdown-content"> 
       <a href="LondonEye.html">London Eye</a> 
       <a href="TowerofLondon.html">Tower of London</a> 
       <a href="BigBen.html">Big Ben</a> 
       <a href="StPaulsCathedral.html">St Pauls Cathedral</a> 
       <a href="BuckinghamPalace.html">Buckingham Palace</a> 
       <a href="WestMinister.html">WestMinister</a> 
      </div> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="Museums">Museums <i class="fa fa-caret-down"></i></a> 
      <div class="dropdown-content"> 
       <a href="BritishMuseum.html">British Museum</a> 
       <a href="ScienceMuseum.html">Science Museum</a> 
       <a href="NationalHistoryMuseum.html">National History Museumm</a> 

      </div> 

     </li> 
    </ul> 

    <button class="accordion">Navigation</button> 
    <div class="panel" style = "position: relative"> 
    <div id="map" style="width:50%;height:250px"></div> 
     </div> 



</div> 

    <script> 
     var acc = document.getElementsByClassName("accordion"); 
     var i; 

     for (i = 0; i < acc.length; i++) { 
      acc[i].onclick = function(){ 
       this.classList.toggle("active"); 
       this.nextElementSibling.classList.toggle("show"); 
      } 
     } 
    </script> 

<script> 
    function myMap() { 
     var mapCanvas = document.getElementById("map"); 
     var myCenter = new google.maps.LatLng(51.508742,-0.120850); 
     var mapOptions = {center: myCenter, zoom: 10}; 
     var map = new google.maps.Map(mapCanvas,mapOptions); 
     var marker = new google.maps.Marker({ 
      position: myCenter, 
      icon: "poi.png" 
     }); 
     marker.setMap(map); 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E&callback=myMap"></script> 




</div> 
</body> 
</html> 
+0

不顯示或顯示灰色區域? – scaisEdge

+0

它只是顯示一個帶有標記圖標的灰色區域,沒有離開地圖的衛星視圖 – Toby

+0

這是因爲你在啓動時沒有visibile標籤,你應該在按下標籤時調用地圖的功能..所以地圖創建時該標籤是可見的.. – scaisEdge

回答

0

通常地圖需要它們的容器是位置:相對

你能嘗試添加位置:相對於面板類?

如果這不起作用,請確保您的Google地圖應用程序密鑰從YOURKEY設置爲任何您的密鑰。

<script src="https://maps.googleapis.com/maps/api/js?key=**YOURKEY**&callback=myMap"></script> 
+0

這真的沒有什麼幫助,我應該把所有的代碼放在給你一個更好的主意嗎?是的,我把我的鑰匙給你,因爲我不想讓有我的API密鑰的人 – Toby

+0

你可以發佈該網站,或它的小提琴不工作? – nixkuroi

0

地圖要求容器具有特定的大小並在加載時可見。它需要知道它應該適合什麼尺寸

+0

那麼沒有幫助atall,我改變面板容器的大小和地圖仍然沒有出現 – Toby

相關問題