如何删除Ionic Google地图中的标记?

时间:2017-08-03 11:36:17

标签: angular google-maps ionic-framework

我是新手,目前正在学习离子。情况是,首先我得到我当前的位置,之后,我有两个选择,搜索银行或学校。

当我搜索银行时,他们会工作,我在我的地图上显示银行的地图标记,但是当我点击学校时,他们也会来。我想要的是,如果我点击银行后的学校,只有学校应该展示,而不是银行。我想摆脱银行旧地图标记。我怎么能这样做?

angular.module('app.controllers', [])

    .controller('homeCtrl', ['$scope', '$stateParams','$compile','$ionicLoading', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
    // You can include any angular dependencies as parameters for this function
    // TIP: Access Route Parameters for your page via $stateParams.parameterName
    function ($scope, $stateParams,$compile,$ionicLoading) {
            var map;
          var latt;
          var lugg;
          var contentString;
          var compiled;
          var infowindow; 
          var searchval;
          var service;
          var mark = [];
          var destination;
          var mar;
          var mylocation;
          var myLatlng;
        function initialize() {
            var pyrmont = {lat: 43.07493, lng:-89.381388};
            var mapOptions = {
              center: pyrmont,
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map"),
              mapOptions);
            $scope.map = map;

          }
          initialize();
          google.maps.event.addDomListener(window, 'load', initialize);
          $scope.centerOnMe = function() {

            if(!$scope.map) {
              return;
            }
                $ionicLoading.show({
                content: 'Loading',
                animation: 'fade-in',
                showBackdrop: true,
                maxWidth: 200,
                showDelay: 0
            });
            navigator.geolocation.getCurrentPosition(function(pos) {
              console.log(pos);
                latt=pos.coords.latitude;
                lugg=pos.coords.longitude;
              $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            console.log(latt,lugg);
            myLatlng = new google.maps.LatLng(latt,lugg);
            var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'its me',
              name:'its me'
            });

            google.maps.event.addListener(marker, 'click', function() {
               infowindow.setContent(marker.name);
              infowindow.open(map,marker);
            });
            $ionicLoading.hide();
            }, function(error) {
              alert('Unable to get location: ' + error.message);
            });
          };

          function createMarker(place) {
            console.log(place);
            var marker = new google.maps.Marker({
              position: place.geometry.location,
              map: map,
              title:""+place.name
            });
            mark.push(marker);
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.setContent(place.name);
              infowindow.open(map,marker);
              function initialize() {

                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer;
                directionsDisplay.setMap(map);
                zoom: 16;
               $scope.onChange = function() {
                  calculateAndDisplayRoute(directionsService, directionsDisplay);
                };
               }

              initialize();
              $scope.onChange();
              function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                directionsService.route({
                  origin:myLatlng,
                  destination: place.name+place.vicinity,
                  travelMode: 'DRIVING'
                }, function(response, status) {
                  if (status === 'OK') {
                   directionsDisplay.setDirections(response);
                  } else {
                    window.alert('Directions request failed due to ' + status);
                  }
                });
              }
            });
          }
          $scope.clickTest = function() {
            alert('Example of infowindow with ng-click')
          };

          $scope.search=function(){
            compiled = $compile(contentString)($scope);

            infowindow = new google.maps.InfoWindow({
              content: compiled[0]
            });
            results = [];
            var pyrmont = {lat: latt, lng: lugg};
            service = new google.maps.places.PlacesService(map);
            service.nearbySearch({
              location: pyrmont,
              radius: 1000,
              type: [""+searchval]
            }, callback); 
          var mylocation = new google.maps.LatLng(latt,lugg); 
          function callback(results, status) {
            destination=results[0].place_id;
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
              }
            }
          } 

          }
          $scope.Schools=function(){
            searchval ="school";
            map.clear();
           $scope.search();
          }

          $scope.Banks=function(){
            searchval ="bank";
            map.clear();
            $scope.search();
          }

          $scope.warn = function () {
             $("#myModal").modal();
             $('.modal-backdrop').remove();
          };



          // Sets a listener on a radio button to change the filter type on Places
          // Autocomplete.

    }])

    .controller('cartCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
    // You can include any angular dependencies as parameters for this function
    // TIP: Access Route Parameters for your page via $stateParams.parameterName
    function ($scope, $stateParams) {

    }])

    .controller('cloudCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
    // You can include any angular dependencies as parameters for this function
    // TIP: Access Route Parameters for your page via $stateParams.parameterName
    function ($scope, $stateParams) {


    }])




    .controller('menuCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
    // You can include any angular dependencies as parameters for this function
    // TIP: Access Route Parameters for your page via $stateParams.parameterName
    function ($scope, $stateParams) {


    }])

0 个答案:

没有答案