使用地理定位更新標記位置後無法繪製Leaflet

我正在使用Leaflet，Leaflet-draw和Cordova Geolocation。加載地圖時（地球視圖），當定位函數被稱爲mapcenter和標記位置更新但不可能繪製時，可以正確繪製。繪圖工具欄是可見和可點擊的，但任何選擇的工具不起作用，當我使用它，我沒有收到記錄器的任何錯誤，似乎繪製可編輯圖層「消失」...使用地理定位更新標記位置後無法繪製Leaflet

鏈接到Plunker： http://plnkr.co/edit/6DH7o3HyPzbpCJs7szcn?p=preview

這是我的代碼：

angular.module('starter', ['ionic', 'ui-leaflet','ngCordova']) 
.controller("MapCtrl", [ "$scope", "leafletData", "$cordovaGeolocation", function($scope, leafletData, $cordovaGeolocation) { 
    angular.extend($scope, { 
    center: { 
     lat: 51.505, 
     lng: -0.09, 
     zoom: 4 
    }, 
    controls: { 
     draw: {} 
    }, 
    markers:{ 
     tracker: { 
      lat: 51.505, 
      lng: -0.09, 
      message: "You're here!", 
      focus: false, 
      icon: {}, 
     } 
    }, 
    layers: { 
     baselayers: { 
     bingAerial: { 
      name: 'Bing Aerial', 
      type: 'bing', 
      key: 'Aj6XtE1Q1rIvehmjn2Rh1LR2qvMGZ-8vPS9Hn3jCeUiToM77JFnf-kFRzyMELDol', 
      layerOptions: { 
      type: 'Aerial' 
      } 
     } 
     }, 

     overlays: { 
     draw: { 
      name: 'draw', 
      type: 'group', 
      visible: true, 
      layerParams: { 
      showOnSelector: false 
      } 
     } 
     } 
    } 
    }); 

    // Cordova Geolocation 
    $scope.locate = function(){ 
    console.log(leafletData); 
    var posOptions = {timeout: 10000, enableHighAccuracy: false}; 
    $cordovaGeolocation 
    .getCurrentPosition(posOptions) 
    .then(function (position) { 
     $scope.center.lat = position.coords.latitude 
     $scope.center.lng = position.coords.longitude 
     $scope.center.zoom = 19 
     $scope.markers.tracker.lat = position.coords.latitude 
     $scope.markers.tracker.lng = position.coords.longitude 
    }, function(err) { 
     // error 
    }); 
    setInterval(function(){ 
     var posOptions = {timeout: 10000, enableHighAccuracy: false}; 
     $cordovaGeolocation 
     .getCurrentPosition(posOptions) 
     .then(function (position) { 
     $scope.markers.tracker.lat = position.coords.latitude 
     $scope.markers.tracker.lng = position.coords.longitude 
     }, function(err) { 
     // error 
     }); 
    },5000) 
    } 
    // /Cordova Geolocation 


    leafletData.getMap().then(function(map) { 
    console.log(leafletData); 
    leafletData.getLayers().then(function(baselayers) { 
     var drawnItems = baselayers.overlays.draw; 
     map.on('draw:created', function (e) { 
     var layer = e.layer; 
     drawnItems.addLayer(layer); 
     console.log(JSON.stringify(layer.toGeoJSON())); 
     }); 
    }); 
    }); 
}])

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link rel="manifest" href="manifest.json"> 

    <!-- un-comment this code to enable service worker 
    <script> 
     if ('serviceWorker' in navigator) { 
     navigator.serviceWorker.register('service-worker.js') 
      .then(() => console.log('service worker installed')) 
      .catch(err => console.log('Error', err)); 
     } 
    </script>--> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="lib/ngCordova/dist/ng-cordova.js"></script> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 

    <script src="lib/leaflet/dist/leaflet.js"></script> 
    <script src="lib/angular-simple-logger/dist/angular-simple-logger.js"></script> 
    <script src="lib/ui-leaflet/dist/ui-leaflet.min.js"></script> 
    <script src="https://rawgit.com/elesdoar/ui-leaflet-layers/master/dist/ui-leaflet-layers.min.js"></script> 
    <script src="lib/leaflet-draw/dist/leaflet.draw.js"></script> 
    <script src="lib/leaflet-plugins/layer/tile/Bing.js"></script> 
    <link rel="stylesheet" href="lib/leaflet/dist/leaflet.css" /> 
    <link rel="stylesheet" href="lib/leaflet-draw/dist/leaflet.draw.css" /> 

    </head> 
    <body ng-app="starter"> 

    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Ionic Blank Starter</h1> 
     <a class="button" ng-click ='locate();'>Locate</a> 
     </ion-header-bar> 


     <ion-content ng-controller ='MapCtrl'> 
     <a class="button" ng-click ='locate();'>Locate</a> 
     <leaflet lf-center="center" controls="controls" markers='markers' layers="layers" width="100%" height="400"></leaflet> 
     </ion-content> 

    </ion-pane> 
    </body> 
    </html>

來源

2016-12-25 tinytanks

可以在設置中Plunker的例子嗎？ – tasseKATT

'setInverval'中的週期代碼應該做什麼？我建議使用'$ interval'服務，因爲您可以確保$ digest循環可以運行，並且您的更改對於角度而言是「可見的」。 –

我使用setInterval每5秒通過地理位置更新本地位置。謝謝你的建議，使用$間隔;）問題仍然存在.. – tinytanks

它停止工作是因爲離子自身的自來水系統沒有原因和Leaflet的搭配很好。

以下Ionic documentation提供了更多信息：

在某些情況下，第三方庫也可以用它可以與自來水系統干擾觸摸事件工作。例如，映射像Google或Leaflet Maps這樣的庫通常會實現與Ionic的抽頭系統衝突的觸摸檢測系統。

特定元素上禁用離子的自來水系統，使其工作：

<leaflet data-tap-disabled="true" ...

演示：https://plnkr.co/edit/LlhpTGYHNMBUzNo1oSwF?p=preview

來源

2016-12-27 07:41:04 tasseKATT

使用地理定位更新標記位置後無法繪製Leaflet

回答

相關問題