web-dev-qa-db-de.com

Verschieben Sie Google Map Center Javascript Api

In meinem Projekt möchte ich die Mitte der Karte an neue 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 Funktion moveToLocation wird aufgerufen, aber die Karte wird nicht zentriert. Irgendeine Idee, was mir fehlt?

javascriptmaps
27
taormania

Ihr Problem ist, dass Sie in moveToLocationdocument.getElementById verwenden, um zu versuchen, das Map-Objekt abzurufen, aber das bringt Ihnen nur eine HTMLDivElement, nicht das google.maps.Map-Element, das Sie erwarten. Ihre Variable map hat also keine panTo-Funktion, weshalb sie nicht funktioniert. Was Sie brauchen, ist, die Variable map irgendwo wegzulassen, und es sollte wie geplant funktionieren. Sie können eine globale Variable wie folgt 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 jsFiddle hier: http://jsfiddle.net/fqt7L/1/

64
Ethan Brown

Zeigen Sie die Google Maps-API dynamisch an. Rufen Sie die Daten in der Datenbank ab, um den Ort, Lat, Long und die Kartenmarkierung mit AngularJS in der Mitte anzuzeigen. Gemacht von Sureshchan ...

 Screenshot of Google Maps 

$(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);
    });
});
1
sureshchann