Question

我正在使用mapbox.js和map.css来创建一个带有简单圆圈的地图，而不是其他任何东西。（working jsfiddle）在我没有角度的情况下，变焦按原样运行（意思是，它在变焦时保持在同一位置）。

当我与示例集成并进行缩放时，圆圈在缩小时略微向左上方拖动，在放大时向右下方拖动，最后在缩放停止时返回原始位置。

在我正在使用的角度项目需要将脚本加载到页面，并且具有地图的视图不是第一个加载的。我没有使用传单的指令，只是使用文件。从示例到角度项目的代码完全相同，唯一的区别是我没有像在示例中那样在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;
            }
        })
});

编辑：我已经尝试将它放在正在加载的第一个视图中，它仍然会发生。

Answer 1

找到它发生的原因：
当仔细检查实际的mapbox.js和mapbox.css时，我注意到我的css是错误的，在用正确的mapbox.css替换它时，它停止了拖动。无论如何，谢谢你的帮助。

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

1 个答案: