首次搜索时,地图无法加载居中

时间:2015-04-25 04:12:37

标签: javascript html css twitter-bootstrap google-maps

任何人都可以告诉我为什么地图第一次加载时没有加载居中?我进行第二次搜索时工作正常,但第一次从未正确加载。

src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"

var directionsDisplay;
var directionsService;
var geocoder;
var currentAddress = 'placeholder';
var tabCount = 0;
var altRouteCount = 0;
var savedRoutes;

$(document).ready(function(){

  $('#message-container').hide (0);
  document.getElementById('sidebar').className = 'sidebar-hidden';
  // Keeps form pointAB from refreshing the page.
  $('#pointAB').on('submit', function (e) { 
    e.preventDefault(); 
  });

  $('#tabs').tab();
  $('#tabs a').click( function (e) { 
    e.preventDefault();
    $(this).tab('show');
  });

  $('#sidebar #togglebtn').click(toggleSidebar);
  $('#deletes').click(deleteTabs);
  $('#routeChange').click(function () {
        var index = $('#routeChange').data('route');
        index = (index+1)%altRouteCount;
        deleteTabs();
        printRoute (savedRoutes, index);
        $('#routeChange').data('route', index);
    });

  // Call Google Direction 
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();

  // Google Autocomplete
  var start_input = document.getElementById('start');
  var end_input = document.getElementById('end');
  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.532980, -74.118551),
    new google.maps.LatLng(40.895218, -73.735403)
  );

  // Bounds right now only restrict country
  var start_autocomplete = new google.maps.places.Autocomplete((start_input),{
      // bounds: {sw:new google.maps.LatLng(40.895218, -73.735403), ne:new google.maps.LatLng(40.532980, -74.118551)},
      componentRestrictions: {country: 'us'}
    }
  );
  var end_autocomplete = new google.maps.places.Autocomplete((end_input),{
      // bounds: {sw:new google.maps.LatLng(40.895218, -73.735403), ne:new google.maps.LatLng(40.532980, -74.118551)},
      componentRestrictions: {country: 'us'}
    }
  );
  start_autocomplete.setBounds(bounds);
  end_autocomplete.setBounds(bounds);

  // Initial map 
  function initialize() {

    var map;
    var pos;

    // Default pos for map will be center of Manhattan
    if(!pos){
      pos = new google.maps.LatLng(40.784148400000000000, -73.966140699999980000);
    }

    var mapOptions = {
      zoom: 13
    };

    getAddress();

    // Draw Map
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map.setCenter(pos);

    // Google Direction text route
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));

    //Needed to resize maps 
    google.maps.event.addDomListener (map, 'idle', function(){
      google.maps.event.trigger (map, 'resize');
    });

  }
  // Load Map
  google.maps.event.addDomListener(window, 'load', initialize);

});

/************************************************
    Site Navigational Elements
************************************************/

function toggleSidebar() {
    var state = $('#sidebar').data('toggle');

    if (state == 'hidden') {
    document.getElementById('sidebar').className = "sidebar-appear";
    $('#sidebar').data('toggle', 'shown');
    }
  else if (state == 'shown') {
    document.getElementById('sidebar').className = "sidebar-hidden";
    $('#sidebar').data('toggle', 'hidden');
  }
};

function nextSlide() {
  $('#navCarousel').carousel('next');
};

function prevSlide(){
  $('#navCarousel').carousel('prev');
};

/************************************************
    UI Messages
************************************************/

function hideMessage(){
  $('#init-message').hide(1000);
};

function pushMessage (messageType, message) {
  $('#message-container').hide (0);

  if (messageType == 'error') {
    document.getElementById('message-container').className = "alert alert-danger";
    document.getElementById('icon').className = "glyphicon glyphicon-remove-sign";
  }
  else if (messageType == 'success') {
     document.getElementById('message-container').className = "alert alert-success";
     document.getElementById('icon').className = "glyphicon glyphicon-ok-sign";
  }
  else if (messageType == 'warn') {
      document.getElementById('message-container').className = "alert alert-warning";
      document.getElementById('icon').className = "glyphicon glyphicon-exclaimation-sign";
  }
  else {
    //Congrats. Senpai has noticed your ability to break shit. Rejoice.
    console.error ("Please check your messageType.")
  }

  $('#message').text(message);
  $('#message-container').show (1000);
};

/************************************************
    Information Retrieval
************************************************/

// Get current location button function
function getAddress(callback){
  geocoder = new google.maps.Geocoder();

  // If geolocation available, get position
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {timeout:60000,maximumAge:60000});
  }
  //Else, browser doesn't support geolocaiton
  else {
    pushMessage ('error', 'Your browser doesn\'t support geolocation.');
    console.log("Browser doesn't support geolocaiton");
  }
  // Optional callback
  if (callback){
    callback();
  }
};

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

  //Reverse geocoding for current location
  geocoder.geocode({'latLng': pos}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results.length != 0) {
        currentAddress = results[0].formatted_address;
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
};

function errorCallback(){

};

fillAddress = function() {
  if (currentAddress != 'placeholder') {
    $('#start').val (currentAddress);  
    pushMessage ('success', "Got your current location!");
  }
  else {
    pushMessage ('warn', 'Please share your location to use this feature.');
  }
};

// Set route and request direction result 
function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;

  if (start == '' && end == '') {
    pushMessage ('error', "Please fill in your current location and destination.");
    start='';
    end='';
    return;
  }
  else if (start == '') {
    pushMessage ('error', "Please fill in your current location.");
    start='';
    end='';
    return;
  }
  else if (end == '') {
    pushMessage ('error', "Please fill in your destination.");
    start='';
    end='';
    return;
  }
  else {
    start += ' new york city';
    end += ' new york city';
  }

  var request = {
    origin: start,
    destination: end,
    provideRouteAlternatives: true,
    travelMode: google.maps.TravelMode.TRANSIT
  };

  deleteTabs();

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
            altRouteCount = response.routes.length;
            savedRoutes = response;

            printRoute (savedRoutes, 0);

      //Move to next slide when directions have been retrieved.
      $('#navCarousel').carousel('next');
      //Disable loading icon pseudocode.
      //$('#loadingIcon').hide(300);
      savedRoutes = response;
    }
    else {
      //If DirectionsStatus.NOT_FOUND 
      //or DirectionsStatus.ZERO_RESULTS
      pushMessage ('error', 'No directions found.');
    }
  });
};

function printRoute (routeObj, routeNo) {
    // Get route object
  var thisRoute = routeObj.routes[routeNo].legs[0];

  for (var i = 0; i < thisRoute.steps.length; i++) {
    // Find all possible transit
    if (typeof thisRoute.steps[i].transit != 'undefined' 
        && thisRoute.steps[i].transit.line.vehicle.type == "SUBWAY") {
        trainTab (thisRoute.steps[i]);
    }
  }
}

//Get details from Maps API json object
function getTransitDetail(obj, tabNo){
    var parent='';
    if (tabNo) {
        parent='div#tab'+tabNo+' ';
    }

  $(parent+'#train').text(obj.transit.line.short_name + " Train");
  $(parent+'#train-stop-depart').text(obj.transit.departure_stop.name);
  $(parent+'#train-stop-end').text(obj.transit.arrival_stop.name);
  $(parent+'#num-stop').text(obj.transit.num_stops + " Stops");
  $(parent+'#arrival_time').text(obj.transit.arrival_time.text);
  $(parent+'#departure_time').text(obj.transit.departure_time.text);
  $(parent+'#distance').text(obj.distance.text);
  $(parent+'#duration').text(obj.duration.text);
};

// Get current time from device
function getTime(){
  var currentdate = new Date(); 
  var datetime = currentdate.getDate() + "/"
              + (currentdate.getMonth()+1)  + "/" 
              + currentdate.getFullYear() + " @ "  
              + currentdate.getHours() + ":"  
              + currentdate.getMinutes() + ":" 
              + currentdate.getSeconds();
  return datetime;
};

function makeNewTab() {
    var prevTab = 'tab' + tabCount;
    tabCount++;
    var newTab = 'tab' + tabCount;
    console.log ('New Tab.');

    //Adds tab to nav bar
    $('#routeChange').before('<li><a href="#'+newTab+'" data-toggle="tab">TAG LABEL</a></li>');
    //Adds contents of tab
    $('div.tab-content #'+prevTab).after('<div id="'+newTab+'"></div>');
    $('#'+newTab).addClass("tab-pane");
};

function deleteTabs() {
    var thisTab;

    while (tabCount >= 1) {
        thisTab = 'tab' + tabCount;
        //Remove tab from nav bar
        $('ul#tabs li a[href="#'+thisTab+'"]').remove();
        //Remove contents of tab
        $('#'+thisTab).remove();
        tabCount--;
    }

    tabCount = 1;

    $('#tabs a:first').tab('show');
};

function trainTab (obj) {
    makeNewTab();
    $('ul#tabs li a[href="#tab'+tabCount+'"]').text(obj.transit.line.short_name);
    $('#tab'+tabCount).append (
            '<div id="station-info" class="col-xs-11 col-xs-height col-sm-12 col-sm-height">\
              <p>Station Info:</p>\
              <p id="train"></p>\
            <p id="train-stop-depart"></p>\
            <p id="train-stop-end"></p>\
            <p id="num-stop"></p>\
            <p id="arrival_time"></p>\
            <p id="departure_time"></p>\
            <p id="distance"></p>\
            <p id="duration"></p>\
            <!-- <%= link_to "an article", @station%> -->\
          </div>');
    getTransitDetail (obj, tabCount);
};

是因为我的代码顺序吗?我试着玩这个订单而找不到解决方案。任何帮助,将不胜感激。提前致谢!

0 个答案:

没有答案