Question

我使用以下代码在传单中添加标记：

.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标记。有没有办法通过使用从API加载的纬度和经度的leaflet数据在JSON地图上显示多个标记？

Answer 1

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

角度传单 - 显示多个标记问题

1 个答案: