2017-02-06 23 views
0

Я использую следующий код для добавления маркеров в листовке:Угловая листовка - Отображение множественных маркерного вопроса

.controller('MapController', 
    [ '$scope', 
    '$cordovaGeolocation', 
    '$stateParams', 
    '$ionicModal', 
    '$ionicPopup', 
    '$http', 
    function(
     $scope, 
     $cordovaGeolocation, 
     $stateParams, 
     $ionicModal, 
     $ionicPopup, 
     $http 
    ) { 

     $scope.$on("$stateChangeSuccess", function() { 
     $scope.map = { 
      defaults: { 
      tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
      maxZoom: 18, 
      zoomControlPosition: 'bottomleft' 
      }, 
      markers : {}, 
      events: { 
      map: { 
       enable: ['context'], 
       logic: 'emit' 
      } 
      } 
     }; 
     $scope.locate(); 
     }); 

     $scope.locate = function(){ 
      $scope.map.center = { 
      lat : location.lat, 
      lng : location.lng, 
      zoom : 12, 
     }; 

     var Location = function() { 
     if (!(this instanceof Location)) return new Location(); 
     this.lat = ""; 
     this.lng = ""; 
     this.name = ""; 
     }; 

     $ionicModal.fromTemplateUrl('templates/addLocation.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
     }).then(function(modal) { 
      $scope.modal = modal; 
     }); 


     $scope.map.markers.push=({ 
      lat:35.654, 
      lng:73.244, 
      message:'demo 1' 
     }) 

     $scope.map.markers.push=({ 
      lat:38.654, 
      lng:73.244, 
      message:'demo 2' 
     }) 

     $scope.$on('leafletDirectiveMap.click', function(event, locationEvent){ 
     $scope.newLocation = new Location(); 
     $scope.newLocation.lat = locationEvent.leafletEvent.latlng.lat; 
     $scope.newLocation.lng = locationEvent.leafletEvent.latlng.lng; 
     $scope.modal.show(); 
     }); 

     $scope.saveLocation = function(lat, lang) { 
     //LocationsService.savedLocations.push($scope.newLocation); 
     //alert(lat + " - " + lang); 
     var link = 'http://192.168.5.110/server/addLocation.php'; 
     var json1 = {l1 : lat, l2 : lang , l3: sessionStorage.getItem('loggedin_phone')}; 
     $http.post(link, { data: json1 }) 
     .then(function (res){ 
     $scope.response = res.data.result; 
     if($scope.response.created=="1"){ 
      $scope.title="Thank You"; 
      $scope.template="Mobile Toilet Added!"; 

      //no back option 
      /* 
      $ionicHistory.nextViewOptions({ 
      disableAnimate: true, 
      disableBack: true 
      }); 
      $state.go('login', {}, {location: "replace", reload: true}); 
      */ 

     }else if($scope.response.exists=="1"){ 
      $scope.title="Duplication"; 
      $scope.template="This Location is already added!"; 

     }else{ 
      $scope.title="Failed"; 
      $scope.template="Contact Our Technical Team"; 
     } 

     var alertPopup = $ionicPopup.alert({ 
      title: $scope.title, 
      template: $scope.template 
     }); 


     }); 
     $scope.modal.hide(); 
     }; 


     $cordovaGeolocation 
     .getCurrentPosition() 
     .then(function (position) { 
      $scope.map.center.lat = position.coords.latitude; 
      $scope.map.center.lng = position.coords.longitude; 
      $scope.map.center.zoom = 18; 
      $scope.map.markers.now = { 
      lat:position.coords.latitude, 
      lng:position.coords.longitude, 
      focus: true,    
      draggable: false, 
      //message: '' 
      }; 

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

     }); 

     }; 
}]); 

Но только demo2 маркера отображение. Есть ли способ показать несколько маркеров на карте leaflet, используя JSON данные о широтах и ​​долготах, загруженных из API?

+0

Необходимо предоставить остальную часть кода - слишком сложно рассказать, что вы предоставили. –

ответ

0
<leaflet defaults="defaults" event-broadcast="events" lf-center="center" markers="markers" layers="layers" id="global-map" width="100%" height="240px"></leaflet> 
     <leaflet defaults="defaults2" event-broadcast="events2" lf-center="center2" markers="markers2" layers="layers2" id="global-map2" width="100%" height="240px"></leaflet> 
+0

, пожалуйста, добавьте описание, объясняющее ответ в пользу всех. – jjj

 Смежные вопросы

  • Нет связанных вопросов^_^