Javascript结合脚本

时间:2014-02-11 21:38:01

标签: javascript

我的html文档中有两个脚本,一个是外部脚本,一个是内部脚本。我想将它们组合到一个外部javascript文件中。不幸的是,当我将内部脚本放在外部脚本中时,内部脚本功能似乎不起作用。我不明白为什么不会。

下面的组合脚本分为内部和外部内容。

//INTERNAL SCRIPT
    var x = 0, y = 0,
        vx = 0, vy = 0,
        ax = 0, ay = 0;

    var points;


    var sphere = document.getElementById("sphere");
    var counting = false;
    var counter = 0;
    var numberOne;

    if (window.DeviceMotionEvent != undefined) {
        window.ondevicemotion = function(e) {

            ax = event.accelerationIncludingGravity.x * 5;
            ay = event.accelerationIncludingGravity.y * 5;

            document.getElementById("counterSpan").innerHTML = Math.round(counter*10)/10;
            //document.getElementById("accelerationX").innerHTML = Math.round(e.accelerationIncludingGravity.x * 10)/10;
            //document.getElementById("accelerationY").innerHTML = Math.round(e.accelerationIncludingGravity.y * 10)/10;
            //document.getElementById("accelerationZ").innerHTML = Math.round(e.accelerationIncludingGravity.z * 10)/10;

            var moveX = Math.round(e.accelerationIncludingGravity.x * 10)/10;
            //var moveY = Math.round(e.accelerationIncludingGravity.y * 10)/10;
            //var moveZ = Math.round(e.accelerationIncludingGravity.z * 10)/10;

            if(moveX > 5 || moveX < -5) {
                counting = true;
                //alert(counting);
                if(counter < 100){counter+=0.01;}
                }




            if ( e.rotationRate ) {
                //document.getElementById("rotationAlpha").innerHTML = Math.round(e.rotationRate.alpha * 10)/10;
                //document.getElementById("rotationBeta").innerHTML = Math.round(e.rotationRate.beta * 10)/10;
                //document.getElementById("rotationGamma").innerHTML = Math.round(e.rotationRate.gamma * 10)/10;
            }       
        }


    $( "#btnEnergize" ).click(function() {

      numberOne = $("#numberOne").val();
            alert(numberOne);
          localStorage.setItem('points',numberOne);

            if (numberOne <= counter){
            counter-=numberOne;
            }
            else {
            alert("Not enough Energize points");    
            }


    });

        setInterval( function() {
            var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
            if ( landscapeOrientation) {
                vx = vx + ay;
                vy = vy + ax;
            } else {
                vy = vy - ay;
                vx = vx + ax;
            }
            vx = vx * 0.98;
            vy = vy * 0.98;
            y = parseInt(y + vy / 50);
            x = parseInt(x + vx / 50);

            boundingBoxCheck();

            //sphere.style.top = y + "px";
            //sphere.style.left = x + "px";

        }, 25);
    } 


    function boundingBoxCheck(){
        if (x<0) { x = 0; vx = -vx; }
        if (y<0) { y = 0; vy = -vy; }
        if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = -vx; }
        if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = -vy; }

    }

    function minmax(value, min, max) 
    {
        if(parseInt(value) < 0 || isNaN(value)) 
            return 0; 
        else if(parseInt(value) > 100) 
            return 100; 
        else return value;

    }



    //EXTERNAL SCRIPT

    jQuery(function($){



      var $overlay = $('.overlay'),
          resize = true,
          map;
        var service;
        var marker = [];
        var pos;
        var infowindow;
        var placeLoc
        var markerValue = [];
        var markers


    function initialize() {
      /*var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

    }*/
    var mapOptions = {
        zoom: 15
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

      // Try HTML5 geolocation
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {

                var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

            var request = {
          location:pos,
          center:pos,
          radius:1000,

      };

      infowindow = new google.maps.InfoWindow();
      var service = new google.maps.places.PlacesService(map);
      service.nearbySearch(request,callback);
          pos = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);


            infowindow = new google.maps.InfoWindow({
            map: map,
            position: pos,
            content: 'You Are Here'
          });
            $('#findMe').data('pos',pos);

          map.setCenter(pos);
        }, function() {
          handleNoGeolocation(true);
        });
      } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
      }



      function callback(results, status) {
          markers = [];
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          markers.push(createMarker(results[i]));
        }
      }
      $('#findMe').data('markers',markers);
    }
    }



    function createMarker(place) {


        placeLoc = place.geometry.location;

      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 8,
            fillColor:'00a14b',
            fillOpacity:0.3,
            fillStroke: '00a14b',       
            strokeWeight:4,
            strokeOpacity: 0.7
        },




      });


      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map, this);
      });
      return marker;
    }

    function handleNoGeolocation(errorFlag) {
      if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
      } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
      }

      var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
      };

      var infowindow = new google.maps.InfoWindow(options);
      map.setCenter(options.position);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    $('#show').click(function(){

        $overlay.show();

      if ( resize ){
        google.maps.event.trigger(map, 'resize');
        resize = false;
      }

    });

    $('.overlay-bg').click(function(){

        $overlay.hide();

    });




    $( "#findMe" ).click(function() {



      var pos     = $(this).data('pos'),
          markers = $(this).data('markers'),
          closest;


      if(!pos || !markers){
        return;
      }

      $.each(markers,function(){
        var distance=google.maps.geometry.spherical
                      .computeDistanceBetween(this.getPosition(),pos);
        if(!closest || closest.distance > distance){
          closest={marker:this,
                   distance:distance}
        }
      });
      if(closest){
        //closest.marker will be the nearest marker, do something with it
        //here we simply trigger a click, which will open the InfoWindow 
        google.maps.event.trigger(closest.marker,'click')


         var Loc2 =  closest.marker.getPosition();


         for (var i=0; i<markers.length; i++) {
             var Loc1 = markers[i].getPosition()



            if (Loc1.equals(Loc2)){
                console.log("its the same");
                console.log("marker array Location 1 " + Loc1 + " marker " + i);
                console.log("closest Location 2 " +Loc2);

                markerValue[i] = numberOne;

                console.log( "marker " + i + " now equals " + markerValue[i]);

            }

         }
      }

    });


    });

1 个答案:

答案 0 :(得分:1)

如果你看一下你的外部代码,它就是一个简写的jQuery ready事件处理程序。由于您的内部代码与DOM交互,因此您应该确保它也在相同的事件处理程序上下文中运行。

可能您的内部代码位于页面底部的onload函数内,或者可能位于其自己的ready事件处理程序中,您忘记将其考虑在内。