Move Google Map Center JavaScript Ai

Question

In meinem Projekt möchte ich das Zentrum der Karte zu neuen Koordinaten verschieben. Dies ist der Code, den ich für die Karte habe

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(0, 0), 
     zoom: 4, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 
    } 
    function moveToLocation(lat, lng){ 
    var center = new google.maps.LatLng(lat, lng); 
    var map = document.getElementById("map_canvas"); 
    map.panTo(center); 

    } 

Die moveToLocation-Funktion wird zwar aufgerufen, aber die Karte wird nicht zentriert. Irgendeine Idee, was ich vermisse?

Answer 1

Ihr Problem ist, dass in moveToLocation, sind Sie document.getElementById zu versuchen, das Map-Objekt zu erhalten, aber das nur bekommt man ein HTMLDivElement, nicht die google.maps.Map Element Sie erwarten. Deine Variable map hat also keine panTo Funktion, weshalb sie nicht funktioniert. Was Sie brauchen, ist Eichhörnchen die map Variable irgendwo weg, und es sollte wie geplant funktionieren. Sie können nur eine globale Variable wie so verwenden:

var map;  // global variable 

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(0, 0), 
     zoom: 4, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    // assigning to global variable: 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 
} 

function moveToLocation(lat, lng){ 
    var center = new google.maps.LatLng(lat, lng); 
    // using global variable: 
    map.panTo(center); 
} 

Siehe Arbeits jsFiddle hier: http://jsfiddle.net/fqt7L/1/

Answer 2

Anzeige des Google Maps API dynamisch mit, holt die Daten in der Datenbank an die Stelle anzuzeigen, lat, long und Kartenmarkierung in der Mitte mit AngularJS anzeigen. Geschehen von Sureshchan ...

$(function() { 
    $http.get('school/transport/scroute/viewRoute?scRouteId=' + scRouteId).success(function(data) { 
     console.log(data); 

     for (var i = 0; i < data.viewRoute.length; i++) { 
      $scope.view = []; 
      $scope.view.push(data.viewRoute[i].stoppingName, data.viewRoute[i].latitude, data.viewRoute[i].longitude); 
      $scope.locData.push($scope.view); 
     }    

     var locations = $scope.locData; 
     var map = new google.maps.Map(document.getElementById('map'), {      
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }); 
     var infowindow = new google.maps.InfoWindow(); 
     var bounds = new google.maps.LatLngBounds(); 
     var marker, j; 

     for (j = 0; j < locations.length; j++) { 
      marker = new google.maps.Marker({ 
       position : new google.maps.LatLng(locations[j][1], locations[j][2]), 
       map : map 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, j) { 
       bounds.extend(marker.position); 
       return function() { 
        infowindow.setContent(locations[j][0]); 
        infowindow.open(map, marker); 
        map.setZoom(map.getZoom() + 1); 
        map.setCenter(marker.getPosition()); 
       } 
      })(marker, j)); 
     }; 
     map.fitBounds(bounds); 
    }); 
});