Angular Leaflet地图刷新

时间:2017-02-24 18:28:07

标签: angularjs leaflet refresh

我有一张传单地图,显示公司存放在国家/地区以及可用于按州过滤商店的表单,但是当我更改de state时,我会重新调用地图但它不刷新标记。我怎样才能做到这一点?我正在使用Angular Leaflet。返回位置的功能有效,但标记不会改变。下面是我的代码:

$http.get(url_sistema + 'mapaFiltro/'+estado).then(function(response) {
                    var local_icons = {
                        default_icon: {
                            iconUrl: url_sistema+'web_files/img/marker.png',
                            iconSize: [35,50],
                            iconAnchor:   [18, 50]
                        }
                    };
                    angular.extend($scope, {
                        icons: local_icons,
                        center: {
                            lat: -20.0990815,
                            lng: -52.6113324,
                            zoom: 4
                        },
                        markers: [],
                        defaults: {
                            tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                            zoomControlPosition: 'topright',
                            tileLayerOptions: {
                                opacity: 0.9,
                                detectRetina: true,
                                reuseTiles: true,
                                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy <a href="http://www.openstreetmap.org/copyright">AngelLira</a>',
                            },
                            scrollWheelZoom: false,
                            minZoom: 2,
                            worldCopyJump: true
                        }
                    });
                    for (var i = 0; i < response.data.dados_mapa.length; i++) {
                        $scope.markers.push(
                            {
                                'lat': response.data.dados_mapa[i].latitude,
                                'lng': response.data.dados_mapa[i].longitude,
                                'focus': false,
                                'message': 
                                    '<div class="logo_mapa">'+
                                        '<img src="web_files/img/logo_mapa.png">'+
                                    '</div>'+
                                    '<div class="texto_mapa">'+
                                        '<h1>'+response.data.dados_mapa[i].titulo+'</h1>'+
                                        '<h2>'+response.data.dados_mapa[i].telefones+'</h2>'+
                                        '<h2>'+response.data.dados_mapa[i].email+'</h2>'+
                                        '<p>'+response.data.dados_mapa[i].endereco+'</p>'+
                                    '</div>'
                                ,
                                'draggable': false,
                                'icon': local_icons.default_icon
                            }
                        );
                    }
                }, function(error) {

                });

我的请求的响应是新标记,我应该在地图中显示。

1 个答案:

答案 0 :(得分:0)

在推送标记的for循环后添加此部分代码:

    leafletData.getMap().then(function(map) {
        setTimeout(function() {
            map.invalidateSize();
            map._resetView(map.getCenter(), map.getZoom(), true);
        }, 200);
    });

另外,您需要将leafletData注入控制器。