JavaScript的

我包含在我的项目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>

当我点击地图时，一个新的标记被添加到'标记'数组中，但它不在地图上，因为行上有错误发生：$ scope。$ apply（）; 错误是：

_.object不是一个函数

怎么了？ 谢谢你的帮助。

---

最有可能发生这种错误，因为您正在使用lodash版本4 ，它破坏了一些角度 - 谷歌地图功能，更多详情请参阅此主题。

解

由于角谷歌地图期待_.contains和_.object函数，添加他们的声明像这样lodash 4：

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

例

修改jsFiddle

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

上一篇: javascript

下一篇: Google maps custom overlay click event