Question

我很困惑，因为AngularJs和HTML代码几乎与一个可以工作的项目完全相同，但这也是我第一次使用LAMP代替MEAN / MERN，所以也许这与它有关吗？

我的HTML文件是：

<div ng-controller="map-controller">
  <ng-map center="35.5951,-82.5515" zoom="12" on-click="vm.placeCheckpoint(data)">

    <!-- Place marker for each checkpoint -->
    <marker id='{{checkpoint._id}}'
      ng-repeat="checkpoint in vm.checkpoints"
      position="{{checkpoint.position}}"
      on-click="vm.showDetail(checkpoint)"
      >
    </marker> <!-- this doesn't display -->

    <marker position="35.5951,-82.5515"></marker> <!--this displays -->

  </ng-map>
</div>

和map-controller.js是：

(function(window, angular, undefined) {
  angular.module('map')
  .controller('map-controller', ['NgMap', '$window', 'mapService',
    function(NgMap, $window, mapService) {

    var vm = this;
    // ==================== Map =====================================

    // Display map
    NgMap.getMap().then(function(map) {
      vm.map = map;
    });

    // Populate map with checkpoints
    mapService.getCheckpoints().then(function(data) {
      vm.checkpoints = data;
      console.log(vm.checkpoints); // logs as a list of objects
    });     


  }])
})(window, window.angular);

关于这个服务器，变量名称之间的唯一区别，以及谷歌让我使用API密钥，而不是另一个需要它。他们都在使用相同的API来获取数据。

另外，如果我尝试添加指令，地图就会消失。

Answer 1

首先，确保position数组中的vm.checkpoints属性具有正确的格式[lat,lng]，例如：

[
    {
        "name": "Oslo",
        "position" : [ 59.923043,10.752839 ]  
    },
    {
        "name": "Stockholm",
        "position" : [ 59.339025, 18.065818 ]  
    }
]

其次，vm.checkpoints指令中marker未定义，您需要使用ng-controller="map-controller"更改表达式ng-controller="map-controller as vm"

实施例

(function (window, angular, undefined) {
    angular.module('map', ['ngMap'])


        .factory('mapService', function ($rootScope, $http) {
            var mapService = {
                getCheckpoints: function () {
                    return $http.get('https://rawgit.com/vgrem/a171e20cbe9915707e5b94c139105a65/raw/europe.json').then(function (response) {
                        return response.data;
                    });
                }
            }
            return mapService;
        })

        .controller('map-controller', ['NgMap', '$window', 'mapService',
            function (NgMap, $window, mapService) {
                var vm = this;
                vm.checkpoints = [];
                
                // Display map
                NgMap.getMap().then(function (map) {
                    vm.map = map;
                    
                });
                // Populate map with checkpoints
                mapService.getCheckpoints().then(function (data) {
                    vm.checkpoints = data.map(function(item, idx){
                           var position = [item.position.lat,item.position.lng];
                           item._id = idx;
                           item.position = position;
                           return item;
                    });
                    console.log(vm.checkpoints); // logs as a list of objects
                });

                vm.showDetail = function(){
                    console.log('clicked')
                }

            }])
})(window, window.angular);

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="map" ng-controller="map-controller as vm">
  <ng-map center="48.1049441,4.1858258" zoom="4" >

    <marker 
      ng-repeat="checkpoint in vm.checkpoints"
      position="{{checkpoint.position}}"
      on-click="vm.showDetail(checkpoint)" >
    </marker> 

  </ng-map>
</div>

AngularJs-Google-Maps标记未显示

1 个答案: