javascript

I included in my project angular-google-maps. I want a map where the user can click on it and add a new marker. I found this snippet on the web: http://jsfiddle.net/sya8gn0w/1/ and I tried to do the same: Here is the function that declare the map:

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

In this is my the 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>

When I Click on the map, a new marker is added in 'markers' array, but it isn't on the map because an error occured on the line: $scope.$apply(); The error is:

_.object is not a function

What's wrong? Thanks for your help.

---

Most likely this error occurs since you are utilizing lodash version 4 which breaks some angular-google-maps functionality, for a more details follow this thread.

Solution

Since angular-google-maps expects the _.contains and _.object functions, add the declaration for them like this for lodash 4:

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

Example

Modified jsFiddle

链接地址: http://www.djcxy.com/p/96198.html

上一篇: 在IntelliJ IDEA中导入Maven依赖关系

下一篇: JavaScript的