Question

我在项目中包含了angular-google-maps。我想要一张地图，用户可以点击它并添加一个新标记。我在网上找到了这个代码段：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（）; 错误是：

_。对象不是函数

怎么了？谢谢你的帮助。

Answer 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

angular-google-maps标记和$ scope。$ apply（）;错误

1 个答案: