web-dev-qa-db-ja.com

GoogleマップセンターのJavaScript APIを移動する

私のプロジェクトでは、マップの中心を新しい座標に移動します。これは私がマップ用に持っているコードです

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関数は呼び出されますが、マップは中心に戻りません。私は何が欠けているのでしょうか？

javascriptmaps
29
taormania

あなたの問題は、moveToLocationでdocument.getElementByIdを使用してMapオブジェクトを取得しようとしているが、google.maps.Map要素ではなくHTMLDivElementのみを取得することです期待。したがって、変数mapにはpanTo関数がないため、機能しません。必要なのは、map変数をどこかに離すことであり、計画どおりに動作するはずです。次のようにグローバル変数を使用できます。

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

こちらのjsFiddleの動作をご覧ください： http://jsfiddle.net/fqt7L/1/

67
Ethan Brown

動的に使用してGoogle Maps APIを表示し、AngularJSを使用して場所、緯度、経度を表示し、中心にマップマーカーを表示するためにデータベースのデータをフェッチします。 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