AngularJs-Google-地图标记未显示

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);

服务器、变量名和 Google 之间的唯一区别是让我为此使用 API 键，而另一个则不需要它。他们都点击相同的 API 来获取数据。

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

Answer 1

首先，确保 vm.checkpoints 数组中的 position 属性具有正确的格式 [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-地图标记未显示

AngularJs-Google-Maps Markers not displaying

google-maps

angularjs

angularjs-google-maps