Google harita merkezi javascript'i açın api

Question

Projemde haritanın merkezini yeni koordinatlara taşımak istiyorum. Bu benim

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); 

    } 

moveToLocation fonksiyonu denilen olsun mu Harita için var kodudur ancak harita merkezini yeniden etmez. Ne eksik olduğum hakkında bir fikrin var mı?

Answer 1

Senin sorunun moveToLocation yılında, sen Map nesneyi almak için denemek için document.getElementById kullanıyorsanız yani, ama bu sadece size bir HTMLDivElement, sen değil bekliyorsanız google.maps.Map eleman alır. Yani map değişkeniniz panTo işlevine sahip değil, bu yüzden çalışmıyor. İhtiyacınız olan şey, bir yerde map değişkeninin sincapıdır ve planlandığı gibi çalışmalıdır. Sadece şöyle bir küresel değişkeni kullanabilirsiniz:

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); 
} 

burada jsFiddle çalışma bakınız: lat, uzun ve, yer göstermek için veritabanındaki veri almaya, http://jsfiddle.net/fqt7L/1/

Answer 2

Ekran dinamik kullanarak Google Maps API AngularJS kullanarak harita işaretleyiciyi merkezde gösterin.

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