移动谷歌地图中心javascript api

Posted 2023-02-16

【中文标题】移动谷歌地图中心javascript api

【英文标题】：Move google map center javascript api

【发布时间】：2012-09-23 20:07:18

【问题描述】：

在我的项目中，我想将地图中心移动到新坐标。这是我的地图代码

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 函数，但地图没有重新居中。知道我缺少什么吗？

【参考方案1】：

您的问题是，在moveToLocation 中，您使用document.getElementById 来尝试获取Map 对象，但这只会让您获得htmlDivElement，而不是您期望的google.maps.Map 元素。所以你的变量map 没有panTo 函数，这就是它不起作用的原因。您需要将map 变量松鼠到某处，它应该按计划工作。您可以像这样使用全局变量：

window.map = undefined;      // global variable

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


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

在这里查看工作的 jsFiddle：http://jsfiddle.net/fqt7L/1/

【参考方案2】：

使用动态显示 Google Maps API，获取数据库中的数据以显示地点、纬度、经度并使用 AngularJS 在中心显示地图标记。由 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);
    );
);

【讨论】：

这是一个已有 4 年历史的问题，答案已被接受。

当原始答案更易于实施时，不确定这有什么价值。