2017-07-10 13 views
1

私はGoogleマップで新しく、ng-mapを追加しましたが、公式プランナーコードplunkerと同じ問題があります。マーカーは表示されません。 これは私のAngularjsコードです。この場合はAngularjsとGoogle maps marker cluster

//Google maps 
var app = angular.module('myApp',['ngMap', 'ngAnimate', 'ui.bootstrap', 'ui.select']); 
app.controller('mapController', ['$scope','$http', 'NgMap', function($scope, $http, NgMap) { 
    NgMap.getMap().then(function(map) { 
     //Get all buildings for maps 
     $http({ 
      method: 'GET', 
      url: '/booking/building/1', 
     }).then(function successCallback(response) { 
      if (typeof response.data.success == 'undefined'){ 
       window.location.href = "/500"; 
      }else if (response.data.success==true){ 
       for (var i=0; i < response.data.result.length;i++){ 
        var latLng = new google.maps.LatLng(response.data.result[i].latitude, response.data.result[i].longitude); 
        vm.dynMarkers.push(new google.maps.Marker({position:latLng, title:response.data.result[i].name})); 
       } 
      }else if (response.data.success==false) 
       notifyMessage(response.data.result, 'error'); 
     }, function errorCallback(response) { 
      window.location.href = "/500"; 
     }); 
     vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {}); 
    }); 
}); 

私は1つのだけの街を持っていますが、将来的には、私は、座標のLOTOを有することができます。

<!-- Maps --> 
<script th:src="@{/static/assets/plugins/angular-maps/ng-map.min.js}" 
    type="text/javascript"></script> 
<script 
    src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js"></script> 

<script> 
    MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ 
     = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m1.png'; //changed image path 
    </script> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=key"> 
    </script> 

は私が

<script>MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m1.png'; //changed image path 
    </script> 

を取り除くためにしようと試みたが、結果はまだ同じ: はHTMLで、私はNG-マップについてこのスクリプトを持っています。私は、CDNリンクだけを地図に描きたいのですが。

答えて

1

私はvatiableが空であるので、私はforの終了後にそれを移動してvm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {});が終了したAJAX内部for前に呼び出され、それが

for (var i=0; i < response.data.result.length;i++){ 
    var latLng = new google.maps.LatLng(response.data.result[i].latitude, response.data.result[i].longitude); 
    vm.dynMarkers.push(new google.maps.Marker({position:latLng, title:response.data.result[i].name})); 
} 
vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {}); 
+0

の作品アプリの残りのコードを投稿することができていることが分かりましたか?それは本当にクールに見えます! – Zypps987

関連する問題