Angularjs ui gmap标记只显示一个标记

我正在尝试使用ui google maps library为angular在地图上显示多个标记，但它只显示一个标记

<div  id="map_canvas" ng-controller="mainCtrl">
<h1 align="center">Maps</h1>
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-markers models="rmarkers" coords="'self'"  fit='true' icon="'icon'">
</ui-map-markers>
</ui-gmap-google-map>
</div>

<script>
angular.module('main', ['google-maps'.ns()])
.controller('mainCtrl', function($scope,$http) {
    $scope.map = {center: {latitude: 42.3349940452867, longitude: -71.0353168884369 }, zoom: 14 };
    //$scope.marker={id: 1, coords: {latitude: 42.3349940452867, longitude: -71.0353168884369 }};
    $scope.options = {scrollwheel: false};
     $scope.rmarkers=[{id: 101, latitude: 42.3349940452867, longitude: -71.0353168884369},
           {id: 102,latitide: 42.35114190333,longitude: -71.0662789402048},
           {id: 103,latitide: 43.35114190333,longitude: -72.0662789402048},
           {id: 104,latitide: 44.35114190333,longitude: -73.0662789402048}];});

---

如果说“用户界面谷歌地图库的角度”，你的意思是

然后，这将在地图上显示多个标记，调整代码的圆顶以显示以小提琴形式运行

html层

javascript层

angular.module('main', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function ($scope) {

angular.extend($scope, {
    map: {
        center: {
            latitude: 42.3349940452867,
            longitude:-71.0353168884369
        },
        zoom: 11,
        markersr: [
        {
            id: 101,
            latitude:  42.3349940452867,
            longitude:-71.0363168884369
        },    
        {
            id: 102,
            latitude:  42.3563941755867,
                  longitude:-71.0466168884469
        }, {
            id: 103,
            latitude:   42.3753940755867,
                  longitude:-71.0853168884369
        }, {
            id: 104,
            latitude:  42.3684940856867,
               longitude:-71.1273168884369
        }],
        dynamicMarkers: []
    }
});

})

css.angular谷歌地图容器{高度：400px；}

基于AngularUI源代码

---

您有一个打字错误。将Latitide替换为latitude

我注意到开始标记