2012-03-22 3 views
0

이 코드 중 일부는 빌린 것이므로지도에서 이미지를 드래그 가능하고 코드 가능한 객체로 변환하는 과정에 익숙하지 않기 때문에 약간의 문제가 있습니다.Google지도 자바 스크립트 코드에서 치명적인 결함을 찾으십니까?

이것은 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> 

답변

1

첫번째 문제는 존재하지 않는 함수 본체 지점에 온로드 방법이다

또한지도 초기화 코드는 body onload 이벤트가 발생했을 때 호출되는 함수 내부에서 수행해야하므로 필요한 dom 요소가 생성되도록 보장됩니다.

다음은 실행할 수있는 가장 간단한 맵 초기화에 대한 기본 예제입니다.

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

+0

또한, 개방 및 태그가 당신이 게시 된 문서에 포함되지 않습니다, 확실하지 그 사본 과거의 오류, 또는 원본 소스의 문제입니다. – javram

+0

예 : 누락 된 태그는 복사/붙여 넣기 오류입니다. 그러나 다른 부분은 의도적이지만 이해되지 않습니다. 내가 작성한 다른지도 페이지 중 하나에서 초기화 기능이 있으며 모든 것이 잘 작동합니다. 그러나 부분적으로 복사 한이 동료의 예에서는 초기화가 없지만 여전히 작동합니다. 어느 쪽이든 작동하면 차이점을 설명해 주시겠습니까? – Aerovistae

+0

나는 당신에게 말할 수있는 다른 예제 코드를보아야 할 것이다. 그것의 큰 부분은 비록 타이밍입니다. DOM 요소가 존재하는 한 스크립트를 통해 액세스 할 수있는 것보다 요소가 아직 DOM에 속해 있지 않으면 스크립트를 통해 요소에 액세스하려고 시도하는 것보다 실패합니다. 이것은 jquery의 문서 reday 함수가 너무 대중화 된 큰 이유이며, 초기화 프로세스의 모든 시간을 추상화합니다. – javram

관련 문제