使用地理位置更新标记位置后无法在传单中绘制答案

【问题标题】：Unable to draw in Leaflet after update of a marker position using geolocation使用地理位置更新标记位置后无法在传单中绘制
【发布时间】：2016-12-25 09:35:02
【问题描述】：

我正在使用 Leaflet、Leaflet-draw 和 Cordova Geolocation。加载地图（地球视图）时，可以正确绘制，当调用定位函数时，地图中心和标记位置更新但无法绘制。绘图工具栏是可见且可点击的，但是当我使用它时，选择的任何工具都不起作用，我在记录器中没有收到任何错误，似乎绘图可编辑层“消失”了......

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>

【问题讨论】：

你能在 Plunker 中建立一个例子吗？
setInverval 中的期刊代码应该做什么？我建议改用$interval 服务，因为您可以确定 $digest 循环会运行，并且您的更改对 Angular 来说是“可见的”。
我使用 setInterval 每 5 秒通过地理位置更新本地位置。感谢您建议使用 $interval ;) 问题仍然存在..
@tasseKATT 我已经为我的问题创建了一个 plunker：plnkr.co/edit/6DH7o3HyPzbpCJs7szcn?p=preview
我一会儿看看。

标签： javascript angularjs cordova leaflet leaflet.draw

【解决方案1】：

它停止工作的原因是因为 Ionic 自己的水龙头系统不能很好地与 Leaflet 配合使用。

以下Ionic documentation有更多信息：

在某些情况下，第三方库也可能与触控一起使用可能会干扰水龙头系统的事件。例如，映射像 Google 或 Leaflet Maps 这样的库通常会实现触摸检测系统与 Ionic 的 tap 系统冲突。

在特定元素上禁用 Ionic 的点击系统以使其工作：

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

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

【讨论】：