我正在使用 Leaflet、Leaflet-draw 和 Cordova Geolocation。当加载 map (地球 View )时，可以正确绘制，当调用定位功能时， map 中心和标记位置已更新但无法绘制。绘图工具栏是可见和可点击的，但是当我使用它时选择的任何工具都不起作用，我在记录器中没有收到任何错误，似乎绘图可编辑层“消失”了......
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>
最佳答案
它停止工作的原因是 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" ...
关于javascript - 使用地理定位更新标记位置后无法在 Leaflet 中绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41320056/