angularjs – Leaflet在展示和隐藏时发出角度问题？想要摆脱$tim

发布时间：2020-12-17 18:04:48 所属栏目：安全来源：网络整理

导读：我有一个传单,用L.map(‘mapelement’)调用.问题是,如果我单击“隐藏”传单地图的按钮,然后再次单击该按钮以显示,传单地图不会显示.但是,当我在创建地图之前在链接函数中放入setTimeout并将其设置为2秒时,每次都会显示地图(尽管我必须等待2秒).有没有更好的

我有一个传单,用L.map(‘mapelement’)调用.问题是,如果我单击“隐藏”传单地图的按钮,然后再次单击该按钮以显示,传单地图不会显示.但是,当我在创建地图之前在链接函数中放入setTimeout并将其设置为2秒时,每次都会显示地图(尽管我必须等待2秒).有没有更好的替代方法在我的自定义“leaflet-map”指令中使用$timeout来显示和隐藏？

解决方法

我创建了一个简单的传单映射指令示例,但没有看到任何代码,而是通过ng-show切换地图的显示.它没有任何$超时工作.如果没有看到任何代码或者知道如何切换地图的显示,很难诊断出问题出在哪里.

angular.module('demo',[])

.directive('leafletMap',function() {
  return {
    restrict: 'E',scope: {
      mapOptions: '&'
    },template: '<div><button ng-click="toggleShow()">Toggle Map</button><div class="demo-map" ng-show="isShown"></div></div>',link: function(scope,elem,attrs) {
      // Find element to bind to map
      var mapElem = elem.children().find('div')[0],// get map options from isolate scope
        mapOptions = scope.mapOptions();

      // State of hide/show
      scope.isShown = true;

      // Create Map.
      var map = L.map(mapElem,mapOptions);

      // Just taken from leaflet example
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw',{
        maxZoom: 18,attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
          '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,' +
          'Imagery ? <a href="http://mapbox.com">Mapbox</a>',id: 'mapbox.streets'
      }).addTo(map);

      // method to toggle the shown/hidden state of map
      scope.toggleShow = function() {
        scope.isShown = !scope.isShown;
      };

      // cleanup on element destroy
      elem.on('$destroy',function() {
        map.remove();
      });
    }
  };
})

.controller('DemoController',function() {
  this.mapOptions = {
    center: [51.505,-0.09],zoom: 13
  };


});

.demo-map {
  height: 500px;
}

<script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<div ng-app="demo" ng-controller="DemoController as ctrl">
  <leaflet-map map-options="ctrl.mapOptions"></leaflet-map>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!