Angularjs 和 Google 映射标记簇

Question

我是 Google 地图的新手，我添加了 ng-map but I have the same problem of official plunker code plunker，标记没有出现。这是我的 Angularjs 代码：

//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个城市，但将来我可能会有很多坐标。在 Html 我有这个关于 ng-map 的脚本：

<!-- 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>

但结果还是一样。我只想使用地图 CDN link.

Answer 1

我发现 vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {}); 在 for 之前被调用并且 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, {});

Angularjs 和 Google 映射标记簇

Angularjs and Google maps marker cluster

javascript

google-maps

angularjs

ng-map