Question

在同一页面上构建一个包含2个不同谷歌地图的网站。地图加载很好。我试图在地图上添加标记，并不断收到此错误。“MarkersParentModel：没有有效的模型属性”

我的控制器是：

angular.module('footStoreApp')
  .controller('ContactpageCtrl', function ($scope, uiGmapGoogleMapApi) {
   uiGmapGoogleMapApi.then(function(maps) {

   });
   $scope.map = { center: { latitude: 32.830593, longitude: -79.825432 }, zoom: 14 };
   $scope.marker = {
    id: 1,
    coords: {
     latitude: 32.830593,
     longitude: -79.825432
    },
   };

   $scope.map2 = { center: { latitude: 32.863488, longitude: -80.023833 }, zoom: 14 };
   $scope.marker2 = {
    id: 2,
    coords: {
     latitude: 32.863488,
     longitude: -80.023833
    }
   }
  });

指令是：

<div>
     <ui-gmap-google-map center='map.center' zoom='map.zoom'><ui-gmap-markers idkey='marker.id' coords='marker.coords'>
     </ui-gmap-markers></ui-gmap-google-map>
    </div>



<ui-gmap-google-map center='map2.center' zoom='map2.zoom'><ui-gmap-markers idkey='marker2.id' coords='marker2.coords'>
    </ui-gmap-markers></ui-gmap-google-map>

Answer 1

您已使用ui-gmap-markers指令代替 ui-gmap-marker。

请参阅文档（http://angular-ui.github.io/angular-google-maps/#!/api）。有两个指令（标记和标记）。

更正后的代码：

var myApp = angular.module('myapp', ['uiGmapgoogle-maps']);

myApp.controller('MyCtrl1', function ($scope, uiGmapGoogleMapApi) {

    uiGmapGoogleMapApi.then(function (maps) {
        $scope.map = {
            center: {
                latitude: 32.830593,
                longitude: -79.825432
            },
            zoom: 14
        };
        $scope.marker = {
            id: 1,
            coords: {
                latitude: 32.830593,
                longitude: -79.825432
            }
        };
        $scope.map2 = {
            center: {
                latitude: 32.863488,
                longitude: -80.023833
            },
            zoom: 14
        };
        $scope.marker2 = {
            id: 2,
            coords: {
                latitude: 32.863488,
                longitude: -80.023833
            }
        }

    });

})

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.1/angular-google-maps.min.js"></script>

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <ui-gmap-google-map center='map.center' zoom='map.zoom'>
            <ui-gmap-marker idkey='marker.id' coords='marker.coords'></ui-gmap-marker>
        </ui-gmap-google-map>
        <hr/>
        <ui-gmap-google-map center='map2.center' zoom='map2.zoom'>
            <ui-gmap-marker idkey='marker2.id' coords='marker2.coords'></ui-gmap-marker>
        </ui-gmap-google-map>
    </div>
</div>

Angular Google Maps“Marker”指令不起作用

1 个答案: