Demo Plunkr

Question

我正在研究这个谷歌地图+ angular.js的例子。我想动态地改变位置中心取决于变量.i.e。我想让它成为动态中心。请建议怎么做？

我想做一些像这样的事情。

//代码在这里

//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

您需要注意范围内的更改才能刷新地图。

Demo Plunkr

（只需使用地图上方的输入字段即可实时更改地图中心）

重要的部分是$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);

Angular中动态的Google Map Update

1 个答案:

Demo Plunkr