使用地理定位更新标记位置后无法在 Leaflet 中绘制

Question

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

Link 到 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>

Answer 1

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

以下Ionic documentation有更多信息：

In some cases, third-party libraries may also be working with touch events which can interfere with the tap system. For example, mapping libraries like Google or Leaflet Maps often implement a touch detection system which conflicts with Ionic’s tap system.

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

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

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

使用地理定位更新标记位置后无法在 Leaflet 中绘制

Unable to draw in Leaflet after update of a marker position using geolocation

javascript

angularjs

leaflet

cordova

leaflet.draw