離子Google地圖控制器不重新啓動

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設置不同的id。然後將id傳遞給create maker的函數。所以，你有這樣的事情：

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