Иконный контроллер Google Maps не перезагружается

Question

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

Это код моего контроллера.

app.controller('mapCtrl', function($scope, $stateParams, $timeout, animalListServ) { 
 

 
\t $scope.$on('$ionicView.enter', function(e) { 
 
\t \t \t var map; 
 
\t \t \t var mostrar = false; 
 

 
\t \t \t console.log("llegamos"); 
 
\t \t \t var paramLongitude = $stateParams.longitude; 
 
\t \t \t var paramLatitude = $stateParams.latitude; 
 
\t \t \t var paramHealth = $stateParams.health; 
 

 
\t \t \t console.log(paramLongitude); 
 
\t \t \t console.log(paramLatitude); 
 
\t \t \t console.log(paramHealth); 
 

 
\t \t \t $timeout(function() { $scope.showMap(); }, 1000); 
 

 
\t \t $scope.showMap = function() { 
 
\t \t \t document.addEventListener("deviceready", function() { 
 
\t \t \t \t var div = document.getElementById("map"); 
 

 
\t \t \t \t //Initiate the map view 
 
\t \t \t \t map = plugin.google.maps.Map.getMap(div); 
 

 
\t \t \t \t map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady); 
 
\t \t \t }, false) 
 
\t \t }; 
 

 
\t \t \t function onMapReady() { 
 

 
\t \t \t \t var canvas = document.createElement('canvas'); 
 
\t \t \t \t canvas.width = 200; 
 
\t \t \t \t canvas.height = 100; 
 
\t \t \t \t var context = canvas.getContext('2d'); 
 

 
\t \t \t \t var img = new Image(); 
 
\t \t \t \t // img.src = array[i].image; 
 
\t \t \t \t img.src = 'img/dogstreet.jpg'; 
 

 

 
\t \t \t \t img.onload = function() { 
 

 
\t \t \t \t context.drawImage(img, 0, 5, 90, 90); 
 

 
\t \t \t \t context.font = '12pt Calibri'; 
 
\t \t \t \t // context.fillStyle = 'black'; 
 
\t \t \t \t context.fillText(paramHealth, 95, 15); 
 
\t \t \t \t context.fillText('09/09/2016', 95, 45); 
 

 
\t \t \t \t \t \t var myLatlng = new plugin.google.maps.LatLng(paramLatitude, paramLongitude); 
 

 
\t \t \t \t \t \t $scope.savedMarker = map.addMarker({ 
 
\t \t \t \t \t \t \t position: myLatlng, 
 
\t \t \t \t \t \t \t title: canvas.toDataURL() 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t }, function(marker) { 
 
\t \t \t \t \t \t \t \t marker.addEventListener(plugin.google.maps.event.MARKER_CLICK, function() { 
 
\t \t \t \t \t \t \t \t \t console.log("llegamos aqui?") 
 
\t \t \t \t \t \t \t \t \t marker.showInfoWindow(); 
 
\t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t \t }); 
 
\t \t \t \t }; 
 

 
\t \t \t } 
 

 
\t }); 
 
});

Answer 1

Проблема заключается в том, что вы оставляете вашу предыдущую карту. Поэтому, когда вы добавляете нового создателя, он добавляется к предыдущей карте.

Я вижу различные варианты здесь:

• Очистить карту, когда вы вернетесь к списку. Просто установите div html в ''.

• Другой вариант - установить разные идентификаторы для каждого отображения div. Затем передайте идентификатор функции, создающей создателя. Таким образом, вы будете иметь что-то вроде этого:

  //... 
  $scope.showMap = function(mapID) { 
      document.addEventListener("deviceready", function() { 
       var div = document.getElementById("map" + mapID); 
  //...