javascript - 点击 map 时未捕获的 TypeError : $scope. map.control.getGMap 不是一个函数

Question

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

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

在 Controller 中

 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);  
    };
 }

Answer 1

您的示例中有一个拼写错误，then 函数接受函数回调 作为第一个参数，例如:

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

出现此错误的原因:

$scope.map.control.getGMap is not a function

因为 $scope.map.control 仅在加载 map 后才进行初始化。

Note: in current version of angular-google-maps library uiGmapIsReady service should be used to wait for directives to finish augmenting control objects.

工作示例

以下示例演示了如何利用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>