angular-google-maps更新モデル

Question

マーカーを更新してマーカーの新しいデータセットを読み込むにはどうすればよいですか？

<ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds" refresh="map.refresh"> 
<ui-gmap-markers 
    models="dataset" 
    coords="'self'" 
    icon="'icon'" 
    doCluster='10' 
    click="onClick" 
    > 
     <ui-gmap-windows show="show"> 
      <div ng-non-bindable> 
       <h3 class="gray3-text fz13 mbottom0">{{title}}</h3> 
      </div> 
     </ui-gmap-windows> 
</ui-gmap-markers> 

私はそう

<p ng-click="changeDataset('allUsers')" class="cursor-pointer"> 
<p ng-click="changeDataset('allQuotations')" class="cursor-pointer"> 

関数のように、UI-GMAP-グーグルマップディレクティブの外部からのデータセットを変更していますが、このです：

scope.changeDataset = function(){ 
    switch (dataset) { 
     case 'allResellers': 
      scope.dataset = scope.allResellers; 
      break; 
      case 'allQuotations': 
       scope.dataset = scope.allQuotations; 
       break; 

      case 'allUsers': 
       scope.dataset = scope.allUsers; 
       break; 

      case 'allMarkers': 
       scope.dataset = scope.allMarkers; 
       break; 
     } 
}; 

私scope.datasetは変更されますが、マップ内のマーカーは更新されません。

PS：modelsbyref = "false"は機能しません。 UI-GMAP-グーグルマップにコントロール= "markerControl" を追加

は働いたが、この回避策を使用する必要がありました：

angular.element(document.getElementsByClassName('angular-google-map')).scope().markerControl.updateModels(newDataset); 


<ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds"> 
<ui-gmap-markers 
    models="dataset" 
    coords="'self'" 
    icon="'icon'" 
    doCluster='10' 
    click="onClick" 
    control="markerControl" 
    > 
     <ui-gmap-windows show="show"> 
      <div ng-non-bindable> 
       <h3 class="gray3-text fz13 mbottom0">{{title}}</h3> 
      </div> 
     </ui-gmap-windows> 
</ui-gmap-markers> 

Answer 1

changeDataset関数は次のように変更した後、データセット名を予期しているため：

$scope.changeDataset = function(dataset) { 
     switch (dataset) { 
      case 'allResellers': 
       $scope.dataset = $scope.allResellers; 
       break; 
      case 'allQuotations': 
       $scope.dataset = $scope.allQuotations; 
       break; 

      case 'allUsers': 
       $scope.dataset = $scope.allUsers; 
       break; 

      case 'allMarkers': 
       $scope.dataset = $scope.allMarkers; 
       break; 
     } 
    }; 

マップモデルが正しく更新されています。

の作業例

angular.module('appMaps', ['uiGmapgoogle-maps']) 
 
    .controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { 
 

 
     $scope.dataset = [ 
 
      { id: 1, title: "Brisbane", latitude: -33.867396, longitude: 151.206854 }, 
 
      { id: 2, title: "Sydney", latitude: -27.46758, longitude: 153.027892 }, 
 
      { id: 3, title: "Perth", latitude: -31.953159, longitude: 115.849915 } 
 
     ]; 
 

 
     $scope.allResellers = []; 
 
     $scope.allQuotations = [ 
 
      { id: 1, title: "Q1", latitude: -31.867396, longitude: 144.206854 }, 
 
      { id: 2, title: "Q2", latitude: -28.46758, longitude: 152.027892 } 
 
     ]; 
 
     $scope.allUsers = [ 
 
      { id: 1, title: "User1", latitude: -36.867396, longitude: 145.206854 }, 
 
      { id: 2, title: "User2", latitude: -33.46758, longitude: 142.027892 }, 
 
     ]; 
 
     $scope.allMarkers = []; 
 

 

 

 
     uiGmapGoogleMapApi.then(function(maps) { 
 
      $scope.map = { 
 
       center: { latitude: -30, longitude: 135.0 }, 
 
       zoom: 4, 
 
       control: {}, 
 
       markerEvents: { 
 
        click: function(marker) { 
 
        } 
 
       }, 
 
       options: $scope.mapOptions 
 
      }; 
 
     }); 
 

 
     $scope.mapOptions = {}; 
 

 

 
     $scope.changeDataset = function(dataset) { 
 
      switch (dataset) { 
 
       case 'allResellers': 
 
        $scope.dataset = $scope.allResellers; 
 
        break; 
 
       case 'allQuotations': 
 
        $scope.dataset = $scope.allQuotations; 
 
        break; 
 

 
       case 'allUsers': 
 
        $scope.dataset = $scope.allUsers; 
 
        break; 
 

 
       case 'allMarkers': 
 
        $scope.dataset = $scope.allMarkers; 
 
        break; 
 
      } 
 
     }; 
 

 

 

 

 
    });

.angular-google-map-container { height: 480px; }

<script src="https://code.angularjs.org/1.3.14/angular.js"></script> 
 
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script> 
 

 
<div ng-app="appMaps" ng-controller="mapCtrl"> 
 

 

 
    <p ng-click="changeDataset('allUsers')" class="cursor-pointer" >Display users</p> 
 
    <p ng-click="changeDataset('allQuotations')" class="cursor-pointer" >Display quotations</p><br/> 
 

 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds" refresh="map.refresh"> 
 
     <ui-gmap-markers models="dataset" coords="'self'" icon="'icon'" doCluster='10' click="onClick"> 
 
      <ui-gmap-windows show="show"> 
 
       <div ng-non-bindable> 
 
        <h3 class="gray3-text fz13 mbottom0">{{title}}</h3> 
 
       </div> 
 
      </ui-gmap-windows> 
 
     </ui-gmap-markers> 
 
</div>

Answer 2

同じ問題angular-google-maps updating marker model

この質問のように、それは私たちが、マーカーを更新angularjsすぐに更新されませんたびのように思えます。新しいマーカーを配列に押した後、$ scope。$ digest（）と呼んでください。

また、$ scope。$ apply（）関数をチェックすると、$ scope。$ digest（）が自動的に呼び出されます。 詳細に説明し、このチュートリアルを参照してください：上記のチュートリアルで書かれ tutorial showing $scope.$digest(), $scope.$apply, $scope.watch

その：

あなたはAngularJSがあなたのために$ダイジェスト（）関数を呼び出していないいくつかのコーナーケースが発生することがあります。通常は、データバインディングが表示された値をアップさせないことに気づいて検出します。その場合、$ scope。$ digest（）を呼び出すとうまくいくはずです。または、おそらく$ scopeを使用できます。$ apply（）