未捕获的类型错误：单击地图时 $scope.map.control.getGMap 不是函数答案

【问题标题】：Uncaught TypeError: $scope.map.control.getGMap is not a function when click on Map未捕获的类型错误：单击地图时 $scope.map.control.getGMap 不是函数
【发布时间】：2016-02-11 19:16:17
【问题描述】：

我正在研究 Angular-Google-MAP。我想在地图上添加标记。但是当我点击地图时，我收到错误$scope.map.control.getGMap is not a function。这是在 geocodePosition() 中定义的，当 Map click 甚至被调用时。请让我知道为什么它不起作用....

<ui-gmap-google-map center='map.center' zoom='map.zoom' control='map.control' id="map-canvas" events="map.events">
   <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'"  events="markerEvents" icon="'icon'">                 
   </ui-gmap-markers>   
</ui-gmap-google-map>

在控制器中

 function MapController($scope, GMapReady, GoogleMapApi, $timeout) {
     GMapReady.promise().then(
         var map={
             center: {
               latitude: 21.1458004,
               longitude: 79.08815460000005
             },
             bounds : {northeast : { latitude : 79.08815460000005, longitude : 79.08815460000005},
                       southwest : { latitude : 79.08815460000005, longitude : 79.08815460000005}},
             zoom: 5,
             control : {}
            }; 
            $scope.map=map;

            $scope.map.events ={
               click: function(map, eventName, originalEventArgs){

              var e=originalEventArgs[0];
              var lat=e.latLng.lat(),lon=e.latLng.lng();

              var latlng = new google.maps.LatLng(lat, lon);
              geocodePosition(latlng);                 
            }
        }// end of Map event
     );

    function geocodePosition(pos){
       .....some code .......
       ......................
     var map_obj=$scope.map.control.getGMap();
     var service = new google.maps.places.PlacesService(map_obj);  
    };
 }

【问题讨论】：

您从geocodePosition 内部调用getGMap，但我看不出您在哪里定义了该函数。
@duncan 为什么我们需要定义getGMap 它是谷歌地图的方法..

标签： javascript angularjs google-maps google-maps-api-3 angular-google-maps

【解决方案1】：

您的示例中有一个错字，then 函数接受 函数回调 作为第一个参数，例如：

uiGmapIsReady.promise().then(function(maps) {
     var map = maps[0]; //get first map instance 
});

出现此错误的原因：

$scope.map.control.getGMap 不是函数

因为$scope.map.control 仅在地图加载后才被初始化。

注意：在当前版本的 angular-google-maps 库中 uiGmapIsReady 服务应该用于等待指令完成扩充control 对象。

工作示例

以下示例演示如何使用Places Library API：

var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.config(function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        libraries: 'places'
    });
})
appMaps.controller('mapController', function($scope,uiGmapIsReady) {
    
    $scope.map = { 
           center: { latitude: 40.1451, longitude: -99.6680 }, 
           zoom: 4, 
           bounds : {northeast : { latitude : 79.08815460000005, longitude : 79.08815460000005},
                   southwest : { latitude : 79.08815460000005, longitude : 79.08815460000005}},
           control: {},
           events: {
              click: function(map, eventName, originalEventArgs){
                  var e = originalEventArgs[0];
                  $scope.geocodePosition(e.latLng);                 
              }
           }                 
    };
    
    $scope.markers = [];
     
    
    $scope.geocodePosition = function(pos) {
       var map = $scope.map.control.getGMap();
       var service = new google.maps.places.PlacesService(map);  
       var request = {
          location: pos,
          radius: '500',
          //types: ['store']   
       };
       service.nearbySearch(request, function(results, status) {
           if (status == google.maps.places.PlacesServiceStatus.OK) {
              var place = results[0];
              alert(place.name);
           }
       });
    };
    
   
    
    
     uiGmapIsReady.promise().then(function(maps) {
        //...
     });
});

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

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="appMaps" ng-controller="mapController">
    <ui-gmap-google-map center='map.center' zoom='map.zoom' control='map.control' id="map-canvas" events="map.events">
        <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" events="markerEvents" >
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>

【讨论】：