イオニックGoogleマップコントローラーが再起動しない

Question

私はリストを持っていますが、リストをクリックするたびに地図が入った別のタブに行き、マーカーを表示しますが、リストをクリックするたびに、マップを更新して1つしか表示しないでください。

これは私のコントローラのコードです。

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を ''に設定するだけです。

• もう1つの方法は、マップdivごとに異なるIDを設定することです。その後、idを関数に渡して、メーカーを作成します。

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