未捕获的类型错误:单击地图时$scope.map.control.getGMap不是一个函数

Uncaught TypeError: $scope.map.control.getGMap is not a function when click on Map

本文关键字：getGMap control 函数 一个 map scope 类型 错误 地图 单击      更新时间：2023-09-26

我正在研究Angular-Google-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>

在控制器中

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

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

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

发生此错误的原因：

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

因为$scope.map.control只有在加载 map 后才会初始化。

注意：在当前版本的角度谷歌地图库中 uiGmapIsReady服务应该用于等待指令 完成对象control扩充。

工作示例

以下示例演示了如何使用位置库 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>

相关文章：