angular-google-maps 标记和 $scope.$apply();错误答案

【问题标题】：angular-google-maps markers and $scope.$apply(); errorangular-google-maps 标记和 $scope.$apply();错误
【发布时间】：2016-04-06 16:02:37
【问题描述】：

我将 angular-google-maps 包含在我的项目中。我想要一个用户可以单击它并添加新标记的地图。我在网上找到了这个 sn-p：http://jsfiddle.net/sya8gn0w/1/，我也尝试这样做：这是声明地图的函数：

function drawMapLocation(lat, lon){
          uiGmapGoogleMapApi.then(function (maps) {
              $scope.mapPoi = {
                  center: { latitude: lat, longitude: lon },
                  zoom: 15,
                  markers: [],
                  events: {
                    click: function (map, eventName, originalEventArgs) {
                        console.log("click yeya");
                        var e = originalEventArgs[0];
                        var lat = e.latLng.lat(),lon = e.latLng.lng();
                        var marker = {
                            id: Date.now(),
                            coords: {
                                latitude: lat,
                                longitude: lon
                            }
                        };
                        $scope.mapPoi.markers.push(marker);
                        console.log($scope.mapPoi.markers);
                        $scope.$apply();
                    }
                  },
                  control: {},
                  options: {
                      heading: 90,
                      mapTypeId: google.maps.MapTypeId.SATELLITE,
                      minZoom: 12,
                      zoomControl: true,
                      draggable: false,
                      navigationControl: true,
                      mapTypeControl: true,
                      scaleControl: true,
                      streetViewControl: false,
                      disableDoubleClickZoom: false,
                      keyboardShortcuts: true,
                      rotateControl: true,
                      styles: [{
                          featureType: "poi",
                          elementType: "labels",
                          stylers: [{
                              visibility: "true"
                          }]
                      }, {
                          featureType: "transit",
                          elementType: "all",
                          stylers: [{
                              visibility: "true"
                          }]
                      }]
                  }
              };
              $scope.options = {scrollwheel: false};
              $scope.circles = [
                  {
                      id: 1,
                      center: {
                          latitude: lat,
                          longitude: lon
                      },
                      radius: 500,
                      stroke: {
                          color: '#08B21F',
                          weight: 2,
                          opacity: 1
                      },
                      fill: {
                          color: '#08B21F',
                          opacity: 0.5
                      },
                      geodesic: true, // optional: defaults to false
                      draggable: true, // optional: defaults to false
                      editable: true // optional: defaults to false
                  }
              ];
          });
  }

这是我的 HTML：

<ui-gmap-google-map center='mapPoi.center' zoom='mapPoi.zoom' draggable="true" events="mapPoi.events">
     <ui-gmap-marker ng-repeat="m in mapPoi.markers" coords="m.coords" idkey="m.id"></ui-gmap-marker>
</ui-gmap-google-map>

当我点击地图时，'markers' 数组中添加了一个新标记，但它不在地图上，因为该行发生错误：$scope.$apply(); 错误是：

_.object 不是函数

怎么了？感谢您的帮助。

【问题讨论】：

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

【解决方案1】：

最有可能发生此错误，因为您使用的是lodash 版本4，它破坏了一些angular-google-maps 功能，有关更多详细信息，请关注this thread。

解决方案

由于angular-google-maps 需要_.contains 和_.object 函数，因此为lodash 4 添加这样的声明：

if( typeof _.contains === 'undefined' ) {
    _.contains = _.includes;
    _.prototype.contains = _.includes;
}
if( typeof _.object === 'undefined' ) {
    _.object = _.zipObject;
}

示例

Modified jsFiddle

【讨论】：