Angularjs 缩放时，圆从原始位置“拖动”

我正在使用mapbox.js和map.css创建一个地图，上面画了一个简单的圆圈，其他什么都没有。在我没有使用angular的示例中，缩放按其应有的方式工作，也就是说，缩放时它保持在相同的位置。 当我与示例集成并进行缩放时，缩小时圆圈会略微拖动到左上角，放大时圆圈会略微拖动到右下角，最后在缩放停止时返回到原始位置。 在angular项目中，我使用require将脚本加载到页面中，并且具有映射的视图不是第一个加载的视图。我不是在使用说明书，只是在使用文件。示例中的代码与angular项目中的代码完全相同，唯一的区别是我没有像示例中那样在html文件中使用脚本标记，因为代码已移动到控制器

我希望行为与示例中的行为相同，但在这个阶段，我不知道是什么导致了它，除了第一次加载的不是视图这一事实之外

以下是查看代码：

<div id="leafletMap" style="width: 500px; height: 300px;"></div>

以下是我的控制器中的代码：

/* globals L, $ */
define(['angular'], function (angular) {
    'use strict';

    /**
     * @ngdoc function
     * @name rmsPortalApp.controller:ViewMapCtrl
     * @description
     * # ViewMapCtrl
     * Controller of the rmsPortalApp
     */
    angular.module('rmsPortalApp.controllers.ViewMapCtrl', [])
        .controller('ViewMapCtrl', function ($scope, Data) {
            var ownerCircleLayer;

                L.Map = L.Map.extend({
                    openPopup: function (popup) {
                        //        this.closePopup();  // just comment this
                        this._popup = popup;

                        return this.addLayer(popup).fire('popupopen', {
                            popup: this._popup
                        });
                    }
                });

                var map = L.map('leafletMap', {
                    touchZoom: true,
                    dragging: true
                }).setView([39.678, -8.229], 6);

                /* Initialize the SVG layer */
                //map._initPathRoot();

                /* SVG from the map object */
                //var svg = d3.select("#map").select("svg");

                var southWest = [85.05, -180.01];
                var northEast = [-85.06, 180.05];

                var bounds = L.latLngBounds(southWest, northEast);

                map.setMaxBounds(bounds);

                L.tileLayer('http://api.tiles.mapbox.com/v4/bmpgp.010fd6a5/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYm1wZ3AiLCJhIjoiOWY4NGYwN2VjZDg0MGI1ZjdmMWI3ZjdlNGNmY2NmNmQifQ.FZ5cr4mO3iDKVkx9zz4Nkg', {
                    attribution: '© Powered By <a href="http://www.cgi.com">CGI</a>',
                    minZoom: 3,
                    maxZoom: 18,
                    id: 'bmpgp.010fd6a5',
                    accessToken: 'pk.eyJ1IjoiYm1wZ3AiLCJhIjoiOWY4NGYwN2VjZDg0MGI1ZjdmMWI3ZjdlNGNmY2NmNmQifQ.FZ5cr4mO3iDKVkx9zz4Nkg'
                }).addTo(map);

                setOwnerCircle()

                function setOwnerCircle() {
                    ownerCircleLayer = new L.layerGroup();

                    var ownerCircle = L.circle([39, -8], 3000, {
                        color: 'red',
                        opacity: 1,
                        weigth: 1,
                        fillOpacity: 0.0,
                        className: 'leaflet-zoom-animated'
                    });

                ownerCircleLayer.addLayer(ownerCircle);

                var circleBounds = ownerCircle.getBounds();

                // Image popup
                var endLat = circleBounds.getCenter().lat - 0.10000;
                var endLon = circleBounds.getEast();

                map.addLayer(ownerCircleLayer);

                addedOwnerCircle = true;
            }
        })
});

编辑：

---

我试着将它放在正在加载的第一个视图中，但它仍然会发生。

找到了它发生的原因：

---

当仔细检查实际的mapbox.js和mapbox.css时，我注意到我的css是错误的，在用正确的mapbox.css替换它时，它停止了拖动。感谢您的帮助。

请将您的发现作为答案发布，而不是编辑问题