AngularJS Ionic Leaflet - 地圖標記不顯示

Question

所以我一直試圖讓傳單在Ionic應用程序中工作，除了我的標記以外，一切工作正常。它們沒有顯示在默認屏幕和locate（）函數中。下面是我的代碼

HTML片段

<leaflet defaults="map.defaults" center="map.center" markers="map.markers" ng-if="map"></leaflet> 

控制器

app.controller('MapController',function($scope, $cordovaGeolocation, $stateParams) { 

    $scope.$on("$stateChangeSuccess", function() { 

     $scope.map = { 
      defaults: { 
       tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
       maxZoom: 18, 
       zoomControlPosition: 'bottomleft'}, 
      center: { 
       lat : 20.6219444444, 
       lng : -105.228333333, 
       zoom : 15}, 
      markers: { 
       lat : 20.6219444444, 
       lng : -105.228333333, 
       message: "Puerto Vallarta, MX", 
       focus: true, 
       draggable: false} 
     }; 

    }); 

    $scope.locate = function(){ 

    $cordovaGeolocation 
     .getCurrentPosition() 
     .then(function (position) { 
     $scope.map.center.lat = position.coords.latitude; 
     $scope.map.center.lng = position.coords.longitude; 
     $scope.map.center.zoom = 16; 

     $scope.map.markers.now = { 
      lat:position.coords.latitude, 
      lng:position.coords.longitude, 
      message: "You Are Here", 
      focus: true, 
      draggable: false 
     }; 

     }, function(err) { 
     // error 
     console.log("Location error!"); 
     console.log(err); 
     }); 

    }; 

}); 

任何想法？感謝尋找

Answer 1

解決

我加標記值給一個變量，然後複製該到$ scope.map 這裏是更新工作控制器

app.controller('MapController',function($scope, $cordovaGeolocation, $stateParams) { 

    $scope.$on("$stateChangeSuccess", function() { 

     var mainMarker = { 
      lat: 20.6219444444, 
      lng: -105.228333333, 
      focus: true, 
      message: "Puerto Vallarta, MX", 
      draggable: false}; 

     $scope.map = { 
      defaults: { 
       tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
       maxZoom: 18, 
       zoomControlPosition: 'bottomleft'}, 
      center: { 
       lat : 20.6219444444, 
       lng : -105.228333333, 
       zoom : 15}, 
      markers: { 
       mainMarker: angular.copy(mainMarker)} 
     }; 

    }); 

    $scope.locate = function(){ 

    $cordovaGeolocation 
     .getCurrentPosition() 
     .then(function (position) { 
     $scope.map.center.lat = position.coords.latitude; 
     $scope.map.center.lng = position.coords.longitude; 
     $scope.map.center.zoom = 16; 

     $scope.map.markers.now = { 
      lat:position.coords.latitude, 
      lng:position.coords.longitude, 
      message: "You Are Here", 
      focus: true, 
      draggable: false 
     }; 

     }, function(err) { 
     // error 
     console.log("Location error!"); 
     console.log(err); 
     }); 

    }; 

});