vendredi 29 juillet 2016

checkbox is not working when using onclick in angular controller

I am trying to use checkboxes in angular controller to show some places on google maps v3, but when I click the checkboxes, they are not working. It seems that the problem lies in onclick and performSearch function cannot be executed. I am new to angularjs, so I am not sure how to change the code in angular method. What should I do to make checkboxes effective? Any help is appreciated. Thanks in advance !

Here is what I want to achieve, but the code only works when not in angular controller.

http://ift.tt/2am2t4A

Here is part of code I tried in angular controller.

 var infowindow;
  var service;
  var transportMap;
  var markersArray = [];
  var options = ['train_station', 'bus_station', 'subway_station', 'transit_station', 'airport',
    'grocery_or_supermarket', 'hospital', 'movie_theater', 'restaurant', 'shopping_center', 'park', 'night_club', 'pharmacy', 'police', 'embassy', 'shopping_mall'
  ];

  $(document).ready(function() {
    initializeTransportMap();

  });

  function getLetteredIcon (letter) {
    return "http://ift.tt/JWeld1" + letter + ".png";
  }

  function initializeTransportMap() {
    var transportLatLng = {
      lat: $scope.result[1].data[0].Latitude,
      lng: $scope.result[1].data[0].Longitude
    };

    transportMap = new google.maps.Map(document.getElementById('transportMap'), {

      center: transportLatLng,
      scrollwheel: false,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      //   mapTypeId: google.maps.MapTypeId.HYBRID,
      mapTypeControl: true,
      disableDefaultUI: false,
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.RIGHT_BOTTOM
      }
    });

    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(transportMap);


    var defaultMarker = 'http://ift.tt/2am256n';
    var marker = new google.maps.Marker({
      position: transportLatLng,
      map: transportMap,
      icon: defaultMarker,
      title: 'Hello World!'
    });
    google.maps.event.addListenerOnce(transportMap, 'bounds_changed', function() {
      $scope.performSearch
    });

    for (var i = 0; i < options.length; i++) {
      document.getElementById('options').innerHTML += '<input type="checkbox" id="' + options[i] + '" ng-click="performSearch()"> <img src=' + getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)) + ' height="20" /> ' + options[i] + '<br>';


    }

  }

  $scope.performSearch = function() {
    clearMaps();
    var clickedOptions = [];
    for (var i = 0; i < options.length; i++) {
      if (document.getElementById(options[i]).checked) {
        performTypeSearch(options[i], getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)));
      }
    }
  }

  $scope.performTypeSearch = function(type, icon) {
    var request = {
      //   bounds: transportMap.getBounds(),
      location: transportLatLng,
      radius: 5000,
      types: [type]
    };
    service.radarSearch(request, function(results, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(type + ":" + status);
        return;
      }
      for (var i = 0, result; result = results[i]; i++) {
        createMarker(result, icon);

      }
    });
  }

  $scope.createMarker = function(place, icon) {
    var marker = new google.maps.Marker({
      map: transportMap,
      position: place.geometry.location,
      icon: icon

    });
    markersArray.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
      service.getDetails(place, function(result, status) {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
          alert(status);
          return;
        }
        infoWindow.setContent(result.name);
        infoWindow.open(transportMap, marker);
      });
    });
  }

  $scope.clearMaps = function() {
    for (var i = 0; i < markersArray.length; i++) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }




Aucun commentaire:

Enregistrer un commentaire