當試圖加載模式時，angularjs googlemap無法加載

Question

我正在使用AngularJS google maps來顯示帶有標記的地圖。

的情況是：

開始接觸像門細節沒有，街，區等領域頁面會與靜態地圖一起顯示。一旦點擊了編輯按鈕，將顯示一個包含所有字段和地圖的彈出窗口。 例如：

CODE：

HTML

    <div class="row" ng-controller="userProfileController"> 
         <ui-gmap-google-map center="center1" zoom="zoom1" pan="true" events="events"> 
         <ui-gmap-markers models="models1" coords="'self'" options="'options'"></ui-gmap-markers> 
         </ui-gmap-google-map> 
        </div> 

控制器

      $scope.center1 = { 
          latitude: lat, 
          longitude: lng 
         }; 


         $scope.zoom1 = 8; 

         $scope.models1 = [{ 
             id: 11445522, 
             latitude: lat, 
             longitude: lng, 
             options: { 
                title: "Current Location" 
             } 
             }]; 

好一切工作正常爲止。

當編輯被點擊我想加載包含字段和地圖的模態中的另一個HTML。這次地圖沒有加載。如果我按'F12'，則可以看到地圖。

代碼彈出：

HTML

<div class="col-sm-12"> 
     <ui-gmap-google-map center="center3" zoom="zoom3" pan="true" events="events3" refresh="true"> 
      <ui-gmap-markers doRebuildAll="true" doCluster="true" models="models3" coords="'self'" options="'options'"></ui-gmap-markers> 
     </ui-gmap-google-map> 

控制器

$scope.center3 = {latitude: 19.20742852680121, 
longitude: 73.553466796875 
}; 
$scope.zoom3 = 7; 
$scope.models3 = [{ 
id: 5421222, 
latitude: 19.20742852680121, 
longitude: 73.553466796875, 
options: { 
title: "User Location" 
} 
                           }]; 

可能是什麼問題？有人能幫我嗎？ 它顯示是這樣的：

Answer 1

我有一個類似的問題，但在我的情況下，用戶輸入一個地址並返回位置。我在網上找到了解決辦法，並與一些調整，我決定這樣...

首先，我在app.js

app.controller('myController'), function ($scope) { 
    // my variable that's control my modal 
    $scope.showModal = false; 
    // my click event, like your 'Edit' button 
    $scope.createModal = function() { 
    $scope.showModal = true; 
    }; 
} 

HTML創建的index.html myController的

<my-modal visible="showModal"></my-modal> 

HTML modal.html

<div class="form-group"> 
    <input type="text" class="form-control" ng-model="chosenPlace" details="chosenPlaceDetails" googleplace placeholder="Address"/> 
    <div class="map_container"> 
    <div id="map_canvas" class="map_canvas"></div> 
    </div>              
</div> 

然後，在我的modal.js，我創建了兩個指令的

// Directive of Google Maps 
angular.module('modal', []) 
    .directive('googleplace', function() { 
    return { 
     require: 'ngModel', 
     scope: { 
     ngModel: '=', 
     details: '=?' 
     }, 
     controller: function ($scope) { 
     $scope.gPlace; 
     $scope.map; 
     $scope.marker; 

     $scope.initMap = function() { 
      // Set the initial lat and lng 
      var latlng = new google.maps.LatLng(-20.00, -47.00); 
      var options = { 
      zoom: 5, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      $scope.map = new google.maps.Map($("#map_canvas")[0], options); 

      $scope.marker = new google.maps.Marker({ 
      map: $scope.map, 
      draggable: true, 
      }); 

      $scope.marker.setPosition(latlng); 
     }; 

     $scope.initMap(); 
     }, 
     link: function(scope, element, attrs, model) { 
     var options = { 
      types: ['geocode'], 
      componentRestrictions: { country: 'us' } 
     };       

     scope.gPlace = new google.maps.places.Autocomplete(element[0], options);  

     google.maps.event.addListener(scope.gPlace, 'place_changed', function() { 
      scope.$apply(function() { 
      google.maps.event.trigger(scope.map, 'resize');       
      var location = new google.maps.LatLng(scope.gPlace.getPlace().geometry.location.A, scope.gPlace.getPlace().geometry.location.F); 
      scope.marker.setPosition(location); 
      scope.map.setCenter(location); 
      scope.map.setZoom(16);          
      }); 
     }); 
     } 
    }; 
    }); 

    .directive('myModal', function() { 
    return { 
     templateUrl: 'modal.html', 
     restrict: 'E', 
     replace: true, 
     scope: true, 
     controller: function ($scope) { 
     }, 
     link: function postLink(scope, element, attrs) { 
     scope.$watch(attrs.visible, function(value) {      
      if(value == true) { 
      $(element).modal('show');    
      }    
      else {        
      $(element).modal('hide'); 
      }    
     }); 

     $(element).on('shown.bs.modal', function(){ 
      scope.$apply(function(){ 
      scope.$parent[attrs.visible] = true; 
      }); 
     }); 

     $(element).on('hidden.bs.modal', function(event){ 
      scope.$apply(function(){    
      scope.$parent[attrs.visible] = false;    
      }); 
     }); 
     } 
    }; 
    }); 

當用戶寫上自己的地址，並按下回車鍵，地圖上的監聽器，找到地圖上的地址和標記。 我這樣做是因爲這是我爲我的項目找到的最佳解決方案。

我希望有幫助。 PS：對不起我的英語：/