Skip to main content
Fim da Recompensa com 50 pontos de reputação concedidos por Dorath
adicionou 16 caracteres ao conteúdo
Fonte Link
OnoSendai
  • 37mil
  • 3
  • 68
  • 120

Guarde uma referência do Marker criado e reutilize-o, atualizando a posição via método setPosition() dessa instância. Exemplo a seguir:

angular.module('myApp', []).
directive('myMap', function($timeout) {
  var link = function(scope, element, attrs) {

    var map, infoWindow;
    var markers = [];

    var currPos = {
      x: 50,
      y: 2
    }; // <- Posição inicial
 
    var mapOptions = {
      center: new google.maps.LatLng(50, 2),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    };

    function initMap() {
      if (map === void 0) {
        map = new google.maps.Map(element[0], mapOptions);
      }
    }

    function setMarker(map, position, title, content) {
      var marker;
      var markerOptions = {
        position: position,
        map: map,
        title: title,
        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
      };

      marker = new google.maps.Marker(markerOptions);
      scope.marker = marker;
      markers.push(marker);
    }

    // show the map and place some markers
    initMap();

    setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'Londres', 'xxxxxxxxx');
    map.panTo(new google.maps.LatLng(51.508515, -0.125487));

    floatABit = function() {

      currPos.x = currPos.x + ((Math.random() * 50) - 25) / 50;
      currPos.y = currPos.y + ((Math.random() * 50) - 25) / 50;

      var ll = new google.maps.LatLng(currPos.x, currPos.y);

      scope.marker.setPosition(ll);
      map.panTo(ll); // Retire o comentárioComente para permitirinterromper o panning automático.
      $timeout(floatABit, 500);
    };

    floatABit();

  };

  return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    link: link
  };
});
#gmaps {
  width: 100%;
  height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="myApp">

  <div my-map=""></div>

</div>

Guarde uma referência do Marker criado e reutilize-o, atualizando a posição via método setPosition(). Exemplo a seguir:

angular.module('myApp', []).
directive('myMap', function($timeout) {
  var link = function(scope, element, attrs) {

    var map, infoWindow;
    var markers = [];

    var currPos = {
      x: 50,
      y: 2
    }; // <- Posição inicial
 
    var mapOptions = {
      center: new google.maps.LatLng(50, 2),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    };

    function initMap() {
      if (map === void 0) {
        map = new google.maps.Map(element[0], mapOptions);
      }
    }

    function setMarker(map, position, title, content) {
      var marker;
      var markerOptions = {
        position: position,
        map: map,
        title: title,
        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
      };

      marker = new google.maps.Marker(markerOptions);
      scope.marker = marker;
      markers.push(marker);
    }

    // show the map and place some markers
    initMap();

    setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'Londres', 'xxxxxxxxx');
    map.panTo(new google.maps.LatLng(51.508515, -0.125487));

    floatABit = function() {

      currPos.x = currPos.x + ((Math.random() * 50) - 25) / 50;
      currPos.y = currPos.y + ((Math.random() * 50) - 25) / 50;

      var ll = new google.maps.LatLng(currPos.x, currPos.y);

      scope.marker.setPosition(ll);
      map.panTo(ll); // Retire o comentário para permitir panning
      $timeout(floatABit, 500);
    };

    floatABit();

  };

  return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    link: link
  };
});
#gmaps {
  width: 100%;
  height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="myApp">

  <div my-map=""></div>

</div>

Guarde uma referência do Marker criado e reutilize-o, atualizando a posição via método setPosition() dessa instância. Exemplo a seguir:

angular.module('myApp', []).
directive('myMap', function($timeout) {
  var link = function(scope, element, attrs) {

    var map, infoWindow;
    var markers = [];

    var currPos = { x: 50, y: 2 }; // <- Posição inicial
    var mapOptions = { center: new google.maps.LatLng(50, 2), zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false };

    function initMap() { if (map === void 0) { map = new google.maps.Map(element[0], mapOptions); } }

    function setMarker(map, position, title, content) {
      var marker;
      var markerOptions = { position: position, map: map, title: title, icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png' };

      marker = new google.maps.Marker(markerOptions);
      scope.marker = marker;
      markers.push(marker);
    }

    initMap();

    setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'Londres', 'xxxxxxxxx');
    map.panTo(new google.maps.LatLng(51.508515, -0.125487));

    floatABit = function() {

      currPos.x = currPos.x + ((Math.random() * 50) - 25) / 50;
      currPos.y = currPos.y + ((Math.random() * 50) - 25) / 50;

      var ll = new google.maps.LatLng(currPos.x, currPos.y);

      scope.marker.setPosition(ll);
      map.panTo(ll); // Comente para interromper o panning automático.
      $timeout(floatABit, 500);
    };

    floatABit();

  };

  return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    link: link
  };
});
#gmaps {
  width: 100%;
  height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="myApp">

  <div my-map=""></div>

</div>
removeu 394 caracteres do conteúdo
Fonte Link
OnoSendai
  • 37mil
  • 3
  • 68
  • 120
angular.module('myApp', []).
directive('myMap', function($timeout) {
  var link = function(scope, element, attrs) {

    var map, infoWindow;
    var markers = [];

    var currPos = {
      x: 50,
      y: 2
    }; // <- Posição inicial

    var mapOptions = {
      center: new google.maps.LatLng(50, 2),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    };

    function initMap() {
      if (map === void 0) {
        map = new google.maps.Map(element[0], mapOptions);
      }
    }    

    function setMarker(map, position, title, content) {
      var marker;
      var markerOptions = {
        position: position,
        map: map,
        title: title,
        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
      };

      marker = new google.maps.Marker(markerOptions);
 
      scope.marker = marker;
 
      markers.push(marker); // add marker to array

      google.maps.event.addListener(marker, 'click', function () {}
     
    // close window if not undefined
       show ifthe (infoWindowmap !==and voidplace 0)some {markers
          infoWindow.closeinitMap();
        }
        // create new window
        var infoWindowOptions = {
          content: content
        };
        infoWindow =setMarker(map, new google.maps.InfoWindowLatLng(infoWindowOptions);
        infoWindow51.open(map508515, marker-0.125487);
    , 'Londres', }'xxxxxxxxx');
    }

    // show the map and place some markers
    initMap();

    setMarker.panTo(map, new google.maps.LatLng(51.508515, -0.125487), 'London', 'Just some content');

    floatABit = function() {

      currPos.x = currPos.x + (( Math.random() * 50) - 25) / 50;
      currPos.y = currPos.y + (( Math.random() * 50) - 25) / 50;

      var ll = new google.maps.LatLng( currPos.x, currPos.y );

      scope.marker.setPosition( ll );
      // map.panTo( ll ); // Retire o comentário para permitir panning
      $timeout(floatABit, 500);
    };

    floatABit();

  };

  return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    link: link
  };
});
#gmaps {
    width: 450px;100%;
    height: 450px;400px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="myApp">
  
  <div my-map=""></div>

</div>
angular.module('myApp', []).
directive('myMap', function($timeout) {
  var link = function(scope, element, attrs) {

    var map, infoWindow;
    var markers = [];

    var currPos = {x: 50, y: 2};

    var mapOptions = {
      center: new google.maps.LatLng(50, 2),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    };

    function initMap() {
      if (map === void 0) {
        map = new google.maps.Map(element[0], mapOptions);
      }
    }    

    function setMarker(map, position, title, content) {
      var marker;
      var markerOptions = {
        position: position,
        map: map,
        title: title,
        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
      };

      marker = new google.maps.Marker(markerOptions);
 
      scope.marker = marker;
 
      markers.push(marker); // add marker to array

      google.maps.event.addListener(marker, 'click', function () {
        // close window if not undefined
        if (infoWindow !== void 0) {
          infoWindow.close();
        }
        // create new window
        var infoWindowOptions = {
          content: content
        };
        infoWindow = new google.maps.InfoWindow(infoWindowOptions);
        infoWindow.open(map, marker);
      });
    }

    // show the map and place some markers
    initMap();

    setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'London', 'Just some content');

    floatABit = function(){

      currPos.x = currPos.x + (( Math.random() * 50) - 25) / 50;
      currPos.y = currPos.y + (( Math.random() * 50) - 25) / 50;

      var ll = new google.maps.LatLng( currPos.x, currPos.y );

      scope.marker.setPosition( ll );
      // map.panTo( ll );
      $timeout(floatABit, 500);
    };

    floatABit();

  };

  return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    link: link
  };
});
#gmaps {
    width: 450px;
    height: 450px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="myApp">
  
  <div my-map=""></div>

</div>
angular.module('myApp', []).
directive('myMap', function($timeout) {
  var link = function(scope, element, attrs) {

    var map, infoWindow;
    var markers = [];

    var currPos = {
      x: 50,
      y: 2
    }; // <- Posição inicial

    var mapOptions = {
      center: new google.maps.LatLng(50, 2),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    };

    function initMap() {
      if (map === void 0) {
        map = new google.maps.Map(element[0], mapOptions);
      }
    }

    function setMarker(map, position, title, content) {
      var marker;
      var markerOptions = {
        position: position,
        map: map,
        title: title,
        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
      };

      marker = new google.maps.Marker(markerOptions);
      scope.marker = marker;
      markers.push(marker);
    }
 
    // show the map and place some markers
    initMap();

    setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'Londres', 'xxxxxxxxx');
    map.panTo(new google.maps.LatLng(51.508515, -0.125487));

    floatABit = function() {

      currPos.x = currPos.x + ((Math.random() * 50) - 25) / 50;
      currPos.y = currPos.y + ((Math.random() * 50) - 25) / 50;

      var ll = new google.maps.LatLng(currPos.x, currPos.y);

      scope.marker.setPosition(ll);
      map.panTo(ll); // Retire o comentário para permitir panning
      $timeout(floatABit, 500);
    };

    floatABit();

  };

  return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    link: link
  };
});
#gmaps {
  width: 100%;
  height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="myApp">

  <div my-map=""></div>

</div>
Fonte Link
OnoSendai
  • 37mil
  • 3
  • 68
  • 120

Guarde uma referência do Marker criado e reutilize-o, atualizando a posição via método setPosition(). Exemplo a seguir:

angular.module('myApp', []).
directive('myMap', function($timeout) {
  var link = function(scope, element, attrs) {

    var map, infoWindow;
    var markers = [];

    var currPos = {x: 50, y: 2};

    var mapOptions = {
      center: new google.maps.LatLng(50, 2),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    };

    function initMap() {
      if (map === void 0) {
        map = new google.maps.Map(element[0], mapOptions);
      }
    }    

    function setMarker(map, position, title, content) {
      var marker;
      var markerOptions = {
        position: position,
        map: map,
        title: title,
        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
      };

      marker = new google.maps.Marker(markerOptions);

      scope.marker = marker;

      markers.push(marker); // add marker to array

      google.maps.event.addListener(marker, 'click', function () {
        // close window if not undefined
        if (infoWindow !== void 0) {
          infoWindow.close();
        }
        // create new window
        var infoWindowOptions = {
          content: content
        };
        infoWindow = new google.maps.InfoWindow(infoWindowOptions);
        infoWindow.open(map, marker);
      });
    }

    // show the map and place some markers
    initMap();

    setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'London', 'Just some content');

    floatABit = function(){

      currPos.x = currPos.x + (( Math.random() * 50) - 25) / 50;
      currPos.y = currPos.y + (( Math.random() * 50) - 25) / 50;

      var ll = new google.maps.LatLng( currPos.x, currPos.y );

      scope.marker.setPosition( ll );
      // map.panTo( ll );
      $timeout(floatABit, 500);
    };

    floatABit();

  };

  return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    link: link
  };
});
#gmaps {
    width: 450px;
    height: 450px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="myApp">
  
  <div my-map=""></div>

</div>

Fonte: https://jsfiddle.net/Xeoncross/k5c2ndyL/, com alterações.