找到這個谷歌地圖JavaScript代碼中的致命缺陷？

這些代碼中的一部分是借來的，所以我有點麻煩，因爲不熟悉將圖像轉換爲地圖中的可拖動和可編碼對象的過程。找到這個谷歌地圖JavaScript代碼中的致命缺陷？

這是phonegap webapp的一部分。運行時，我看到地圖，然後看到標記圖像，然後我可以拖動 - 但是，當我放下它時，它不會固定到地圖上，並且可以點擊進行事件觸發，就像我在原始示例中對其進行建模後。任何人都可以發現任何憤怒的瑕疵？

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 

     <meta charset="utf-8"> 
      <style type="text/css"> 
       html { height: 100% } 
       body { height: 100%; margin: 0; padding: 0 } 
       #map { height: 100% } 
       </style> 


      <!-- iPad/iPhone specific css below, add after your main css > 
      <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />  
      <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />  
      --> 
      <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> 
      <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script> 
      <script type="text/javascript"> 


       function onBodyLoad() 
       {  
        document.addEventListener("deviceready", onDeviceReady, false); 
       } 

       /* When this function is called, PhoneGap has been initialized and is ready to roll */ 
       /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. 
       see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html 
       for more details -jm */ 


      <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHvl0q_ICxMdoioV8TAVeDhT3Rnec_7H_Z7LsYhQbN1_UW7UedxRVF7XTuKiZUL-yUwkvJri9Ou5rRQ" type="text/javascript"></script> 
      <script> 

        <script> 
         function centerAndZoomOnBounds(bounds) { 
          var center = bounds.getCenter(); 
          var newZoom = map.getBoundsZoomLevel(bounds); 
          if (map.getZoom() != newZoom) { 
           map.setCenter(center, newZoom); 
          } else { 
           map.panTo(center); 
          } 
         } 

         function createMarker(p) { 
          var m = new GMarker(p); 
          GEvent.addListener(m,"click",function(){this.openInfoWindow(p.toUrlValue())}); 
          return m; 
         } 

         function addMarkerToMap() { 
          // find location of point 
          var markerPointx = this.left+10; // left+half the width; 
          var markerPointy = this.top+34 ; // top + height; 
          var markerPoint = map.fromContainerPixelToLatLng(new GPoint(markerPointx,markerPointy)); 
          // add marker 
          var m1 = createMarker(markerPoint); 
          map.addOverlay(m1); 
          // move draggable back to start 
          marker.moveTo(new GPoint(16,110)); 
         } 

        </script> 




      </head> 


    <body onload="initialize()" onunload="GUnload()"> 

     <p><big><a href="InputCoordinates.html">Back</a></big></p> 


     <div id="map" width=100% height=100%> 
      <br><p style="padding-left:25px" id="message">You should be seeing a Google Map here.</p> 

     </div> 

     <img src="http://maps.gstatic.com/intl/en_ALL/mapfiles/marker.png" id="imgMarker"> 

      <script type="text/javascript"> 
       //<![CDATA[ 

       var mapdiv = document.getElementById("map"); 
       var map = new GMap2(mapdiv); 

       map.addControl(new GSmallMapControl()); 
       map.addControl(new GScaleControl()); 
       map.addControl(new GMapTypeControl()); 
       map.setCenter(new GLatLng(52.019029,-0.770427), 6, G_NORMAL_MAP); 

       marker = new GDraggableObject(document.getElementById("imgMarker")); 
       marker.moveTo(new GPoint(16,110)); 
       GEvent.addListener(marker,"dragend",addMarkerToMap); 

       //]]> 
      </script> 

     <!--Maps API Key 
     AIzaSyD52tRfTY1FtEgXQpvu9-jN5AOz-2pxQg0 
     --> 
    </body> 


</html>

來源

2012-03-22 Aerovistae

的第一個問題是，在主體點在onload方法不存在的功能：初始化（）;

此外，地圖初始化代碼需要在正文onload事件觸發時調用的函數內完成，以確保必要的dom元素已經創建。

下面是一個基本示例，顯示可以運行的最簡單的映射初始化。

https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple

來源

2012-03-22 16:07:08 javram

此外，開幕和標籤不包括您發佈的文檔中，不知道這是一個複製過去的錯誤，或與原始源的問題。 – javram 2012-03-22 16:09:06

是的，缺失標籤是複製/粘貼錯誤。然而，另一部分是故意的，但沒有被理解。在我自己寫的其他地圖頁面中，我確實有一個初始化函數，整個工作都很順利。然而，在我部分複製的這個人的例子中，沒有初始化，但仍然可以工作。你能解釋一下，如果它能以任何一種方式發揮作用，那麼它們有什麼不同？ – Aerovistae 2012-03-22 17:52:07

我不得不看另一個例子的代碼能夠告訴你。它的一大部分是時機。只要存在DOM元素，而不是腳本可訪問的元素，如果這些元素還不是DOM的一部分，那麼嘗試通過腳本訪問它們將會失敗。這是爲什麼jQuery中的文檔reday函數變得如此流行的一個重要原因，它抽象了初始化過程的所有時序。 – javram 2012-03-22 18:51:19

找到這個谷歌地圖JavaScript代碼中的致命缺陷？

回答

相關問題