2017-01-16 53 views
0

II已经实现了一个地图,它显示标记中的客户端。我使用的地图为Leaflet,AngularJS的地图为directive

我的问题是,当我第一次访问地图时,它正常工作,当我改变路线时,它擦除所有标记,返回地图屏幕,它没有标记加载,只有当我重新加载这一页。

$ Window.location.reload()函数。

因此,当我访问地图所在的页面时,我想到了使用$ window.location.reload()。当我点击页面的菜单图标(快捷方式)时,我会调用该函数,并重新加载显示标记的页面。

vm.recarregarRota = function(){ 
    $window.location.reload(); 
} 

查看:这是载入地图的代码。

<div class="col-md-12 box_map" style="padding: 20px 30px 20px 30px;"> 
<div id="recent_activity" class="box_whiteframe_map"> 
    <leaflet defaults="vm.defaults" lf-center="vm.center" ng-init="vm.buscaEnderecoClientesEmpresas()" markers="vm.markers" width="100%" height="480px"></leaflet> 
</div> 

控制器:在所述控制器用于加载DB数据并将其分配给所述标志物的功能。这也是我创建标记的功能。并延长地图的属性,如告诉它,它的起始位置就是在这样的坐标..

  vm.markers = new Array(); //CRIA MARKERS A SEREM UTILIZADOS NO MAP 

    vm.buscaEnderecoClientesEmpresas = function() { //Function used to load DB data and assign to bookmarks. It is also in this function that I create the bookmarks .... 

     vm.items.then(function(items) { // Read array of return 
      relatoriosService.carregarEnderecoClientesEmpresas(dados).then(function(response) { 
       if (response.data != 'null') { 
        vm.enderecoClientesEmpresas = response.data; //return array 
        angular.forEach(vm.enderecoClientesEmpresas, function(value, key) { //FOREACH UTILIZADO PARA PERCORRER ARRAY 

         vm.markers.push({ 
          group: value.estado, //DATA FROM THE BD. 
          lat: value.latitude, //DATA FROM THE BD. 
          lng: value.longitude, //DATA FROM THE BD. 
          message: "teste", 
          icon: { 
           type: 'awesomeMarker', 
           prefix: 'fa', 
           icon: icon, 
           markerColor: color 
          }, 
          label: { 
           options: { 
            noHide: true 
           } 
          } 
         }); 
        }); 
       } else { 
        vm.enderecoClientesEmpresas = ''; 
       } 

      }, function(error) { 
       console.log('Erro findSemEmail: ', error); 
      }); 
     }); 
    } 


    angular.extend(vm, { // 
EXTEND THE PROPERTIES OF THE MAP (MARKERS, INCIAL LOCATION ..) 
     center: { // 
INITIAL LOCATION. 
      lat: -27.952419, 
      lng: -52.211667, 
      zoom: 6 
     }, 
     defaults: { // 
LAYER IS THE TYPE OF MAP TO BE USED 
      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">Funil PRÓ</a>', 
      }, 
     } 
    }); 

我的问题如下,当用户,而不是使用系统快捷键进行导航,使用浏览器后退箭头,页面不会重新加载,如果使用此表单,有一种方法可以使页面重新加载?

或者,也许当您访问特定的路线重新加载页面。

回答

0

“或者,也许当您访问特定的路线重新加载页面。”

是的,你可以通过使用$routeChange事件访问:

$rootScope.$on("$routeChangeStart", function(event, next, current) { 
    var urlFrom = current.$$route.originalPath; // Page you are coming from 
    var urlTo = next.$$route.originalPath; // Page you are going to 
}); 

不要忘记你的模块中注入$rootScope$window

相关问题