0

私はJavaScriptが初めてです。

GooogleMaps API を使用するスクリプトを作成する

正常に動作しています。データベースから緯度経度を取得し、マーカーを作成し、マップに配置します。

関数呼び出しを 1 レベル上に移動することにしました (これは PageMethod 呼び出しの OnSuccess メソッドにありました)。動作を停止。

アラートを設定して診断します。働き始めます。

呼び出された関数 MakeLatLngs() の先頭にアラートを表示するように絞り込みました。

MakeLatLngs コードは、アラートの存在やコメントアウトに関係なく実行されているように見えます。アラート ステートメントが含まれているとマップが表示され、アラート ステートメントがコメント アウトされているとマップが表示されないだけです。アラートは単なるテキストであり、変数を使用していません。そのため、ここで何が起こっているのか理解できません。

マップを描画する関数 DrawMap() でも同じことが起こっています。関数の開始時に有益なアラートを配置すると、マップが描画されます。そのままにしておくと、マップはそうではありません。

何が起こっているかについての手がかりをいただければ幸いです。

スクリプトは以下です。フローは、スクリプトの下部にある関数 Initialise から始まります。ありがとう

     var myPositions = [];
     var myRoutes = [];
     var myString = [];
     var myLatLngs = [];
     var myTitles = [];
     var NumPoints;
     var map;
     var poly;
     var RouteName;
     var myMarkers = [];
     var myMapCentre = new google.maps.LatLng(-41.2954168187213, 174.767133718655);
     function DrawMap() {
         alert("Generating Points for " + RouteName);// Need this to display
         var thisLatLng = myLatLngs[0];

         var myOptions = {
             zoom: 8,
             center: thisLatLng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };

         map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

         MakeMarkers();
         RouteLine();
     }

     function OnSuccess1(response) {
         myPositions = new Array();

         myString = response;

         NumPoints = response.length;
         for (var i = 0; i < NumPoints; i++) {
             myPositions[i] = response[i];

         }
     }
     function OnError1(response) {
     }

     function Marker()
     {
     this.meterId=0;
     this.latLng="";
     }
     function OnSuccess(response) {
         myPositions = new Array();

         myString = response;

         NumPoints = response.length;
         alert("Numpoints is " + NumPoints);
         for (var i = 0; i < NumPoints; i++) {
             myPositions[i] = response[i];

         }
         alert("Exiting OnSuccess");
         //MakeLatLngs(); //ORIGINAL POSITION OF LATLNG CALL
         return true;
     }

     function setRoute() {
     RouteName = prompt(' What route?', '');

     }

     function OnError(error) {
         alert("In Error");
     }
     function RouteLine() {
         var polyOptions = {
             strokeColor: '#000000',
             strokeOpacity: 1.0,
             strokeWeight: 3
         }
         poly = new google.maps.Polyline(polyOptions);
         poly.setMap(map);
         var path = poly.getPath();
         for (var i = 0; i < NumPoints; i++) {
             path.push(myLatLngs[i]);
         }

     }

     function MakeLatLngs() {
         alert("You need me now " );//Got to have this to display OK when called from LoadData
         myLatLngs = new Array();
         for (var i = 0; i < NumPoints; i++) {

             var sMarker = myPositions[i];

             var SeqPos = sMarker.indexOf(";");
             var latLngPos = sMarker.indexOf(";", SeqPos + 1);
             var marker = sMarker.substring(0, latLngPos);
             //alert("Marker is " + marker);
             //var Seq = sMarker.substring(latLngPos + 1, SeqPos - latLngPos);
             myTitles[i] = marker;
             //alert("MeterId is " + marker);
             var sLatLng = sMarker.substring(latLngPos + 1)
             //alert("SLatLng is " + sLatLng);
             var pos = sLatLng.indexOf(",");
             //alert("pos is " + pos);
             var sLat = sLatLng.substring(0, pos);
             //alert("sLat is " + sLat);
             var sLng = sLatLng.substring(pos + 1, sLatLng.length - 1);
             //alert("sLng is " + sLng);
             var lat = parseFloat(sLat);
             var lng = parseFloat(sLng);


             //alert("Lat is " + lat + " Long is " + lng);
             if (!isNaN(lng) && !isNaN(lat) && lat != 0 && lng != 0 ) {
                 var latlng = new google.maps.LatLng(lat, lng);
                 myLatLngs[i] = latlng;
             }

         }
         alert("Exiting MakeLatLngs")

     }

     function MakeMarkers() {

         for (var i = 0; i < NumPoints; i++) {
             var sTitle = "MyValue " + i;
             var marker = new google.maps.Marker({
                 position: myLatLngs[i],
                 map: map,
                 title: myTitles[i]
             });
         }
     }

     function LoadData() {

         setRoute();//Get the desired route from the user
         PageMethods.GetMarkers(RouteName, OnSuccess, OnError);
         MakeLatLngs(); //Works here ONLY WHEN AN ALERT IS FIRST LINE in FUNCTION. Orginal call was at end of OnSuccess
         //PageMethods.GetRouteBoundaries(OnSuccess1, OnError1);
         return false;
     }

     function initialize() {

         LoadData();
         DrawMap();
     }

     google.maps.event.addDomListener(window, 'load', initialize);//yes you do need this with or without <body onload="initialise">
4

1 に答える 1

1

その理由は、PageMethods.GetMarkersが非同期であるため、 DrawMapを呼び出したときにデータが読み込まれていないためです。アラートを使用すると、データがロードされるのに十分な時間実行が一時停止されると思います。ページ メソッドのOnSuccess内に DrawMap メソッドを配置すると、問題が解決するはずです。

于 2012-05-30T03:35:57.130 に答える