Question

所以我一直试图让传单在一个离子应用程序中工作，除了我的标记，一切都很好。它们没有显示在默认屏幕中，也没有显示在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);
      });

  };

});

AngularJS Ionic Leaflet - 未显示的地图标记

1 个答案: