有角度的谷歌地图。访问地图默认功能

即时通讯工作在谷歌地图的事情，我需要访问setZoom方法时点击自定义按钮。问题是setZoom（）变得不确定。我已经加载了所有的依赖项（地图渲染和我的$ scope.zoom运行）。我已经测试过了。任何人都知道该怎么办？有角度的谷歌地图。访问地图默认功能

HTML：

<div ng-app="app" ng-controller="MapController"> 
<ui-gmap-google-map center="map.center" zoom="map.zoom"> 
    <ui-gmap-map-control template="../pages/partials/map-controls.html" controller="MapController" position="RIGHT_BOTTOM"> 
    </ui-gmap-map-control> 
</ui-gmap-google-map> 
</div>

JS：

$scope.map = { 
     center: { 
      latitude: 67.855800, 
      longitude: 20.225282 
     }, 
     zoom: 13, 
     options: { 
      scrollwheel: false, 
      disableDefaultUI: true, 
      streetViewControl: false, 
      backgroundColor: '#f2f2f2' 
     } 
    }; 
    $scope.zoom = function($event) { 
     $event.preventDefault(); 
     //the problem is here. $scope.map.setZoom() gets undefined. 
     $scope.map.setZoom(9); 
    };

来源

2016-05-31 user2952238

我想你想打电话给

$scope.map.control.getGMap().setZoom(9);

代替

$scope.map.setZoom(9);

参见示例控制器的详细信息 - https://github.com/angular-ui/angular-google-maps/blob/cbd17a3a225dfe543faa124eb295e66db566f27c/example/assets/scripts/controllers/example.js

---更新例如

HTML：

<div ng-app="app" ng-controller="MapController"> 
<ui-gmap-google-map 
    center="map.center" 
    zoom="map.zoom"   
    options="map.options" 
    control="map.control> 
    <ui-gmap-map-control 
    template="../pages/partials/map-controls.html" 
    controller="MapController" 
    position="RIGHT_BOTTOM"> 
    </ui-gmap-map-control> 
</ui-gmap-google-map> 
</div>

JS：

scope.map = { 
     center: { 
      latitude: 67.855800, 
      longitude: 20.225282 
     }, 
     control: {}, 
     zoom: 13, 
     options: { 
      scrollwheel: false, 
      disableDefaultUI: true, 
      streetViewControl: false, 
      backgroundColor: '#f2f2f2' 
     } 
    }; 
    $scope.zoom = function($event) { 
     $event.preventDefault(); 
     //the problem is here. $scope.map.setZoom() gets undefined. 
     $scope.map.setZoom(9); 
    };

---添加例如

angular 
 
    .module('app', ['uiGmapgoogle-maps']) 
 
    .controller('MapController', mapController) 
 

 

 
mapController.$inject = ['$scope', 'uiGmapIsReady']; 
 

 
function mapController($scope, uiGmapIsReady) { 
 
    
 
    $scope.map = { 
 
    center: { 
 
     latitude: 67.855800, 
 
     longitude: 20.225282 
 
    }, 
 
    control: {}, 
 
    zoom: 13, 
 
    options: { 
 
     scrollwheel: false, 
 
     disableDefaultUI: true, 
 
     streetViewControl: false, 
 
     backgroundColor: '#f2f2f2' 
 
    } 
 
    }; 
 
    
 
    $scope.zoom = function($event) { 
 
    $scope.map.control.getGMap().setZoom(9); 
 
    }; 
 
     
 
    uiGmapIsReady 
 
    .promise() 
 
    .then(function (maps) { 
 
     // ready to manip map 
 
    }); 
 
};

html, body, #map_canvas { 
 
      height: 200px; 
 
      width: 200px; 
 
      margin: 0px; 
 
     } 
 

 
     #map_canvas { 
 
      position: relative; 
 
     } 
 

 
     .angular-google-map-container { 
 
      position: absolute; 
 
      top: 20px; 
 
      bottom: 0; 
 
      right: 0; 
 
      left: 0; 
 
     }

<!DOCTYPE html> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
 
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script> 
 
    <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script> 
 
    <script type='text/javascript' src='script.js'></script> 
 

 

 

 
<div ng-app='app' id='map_canvas' ng-controller='MapController'> 
 
    <button ng-click='zoom()'>Set Zoom</button> 
 
    <ui-gmap-google-map 
 
    center="map.center" 
 
    zoom="map.zoom" 
 
    control="map.control"> 
 
    </ui-gmap-google-map> 
 
</div>

来源

2016-05-31 15:07:29

谢谢！但我得到“map.control是未定义的”。 – user2952238

我已经更新了您的示例以注入'map.control'，当您尝试调用它时，它不应该是未定义的 –

我实现了更改并执行了此操作：console.log（$ scope.map.control）;其中得到undefined .. – user2952238

有角度的谷歌地图。访问地图默认功能

回答

相关问题