angularjs - 谷歌地图在 Angular 中动态更新

Question

http://plnkr.co/edit/Zd9GwG?p=preview

我正在处理这个 google map + angular.js 示例。我想根据变量动态更改位置中心。即我想让它成为动态中心。请建议如何做到这一点？

我想做这样的事情。

//代码在这里

//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui.directives']);

function MapCtrl($scope) {

  $scope.lat = 35.120922 ;
  $scope.long = -89.97731 ;
    var ll = new google.maps.LatLng($scope.lat, $scope.long);
    $scope.mapOptions = {
        center: ll,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //Markers should be added after map is loaded
    $scope.onMapIdle = function() {
        //alert("DF");
        if ($scope.myMarkers === undefined){    
            var marker = new google.maps.Marker({
                map: $scope.myMap,
                position: ll
            });
            $scope.myMarkers = [marker, ];
        }
    };
       $scope.showMarkerInfo = function(marker) {  
        $scope.myInfoWindow.open($scope.myMap, marker);
    };

    $scope.changeval = function(){
      $scope.lat = 13.0810 ;
      $scope.long = 80.2740 ;


    };





}

Answer 1

您需要观察范围内的变化才能刷新 map 。

Demo Plunkr

(只需使用 map 上方的输入字段即可实时更改 map 的中心)

重要的部分是$scope.$watch:

  var updateCenter = function() {
    var ll = new google.maps.LatLng($scope.lat, $scope.long);
    $scope.myMap.panTo(ll);
    // eventually more stuff
  }
  $scope.$watch('lat', updateCenter);
  $scope.$watch('long', updateCenter);