ui-gmap-markers 只显示一个标记答案

【问题标题】：ui-gmap-markers showing only one markerui-gmap-markers 只显示一个标记
【发布时间】：2014-11-16 21:30:54
【问题描述】：

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

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

【问题讨论】：

我注意到开始标签，开始标签是或者结束标签是

标签： angularjs google-maps angular-ui angular-google-maps

【解决方案1】：

如果你的意思是“ui-google-maps library for angular” https://github.com/angular-ui/angular-google-maps

然后这会在地图上显示多个标记，调整代码的圆顶以显示在小提琴中运行 http://jsfiddle.net/nigeljvm/duabubeo/9/

html层

<div ng-app="main" ng-controller="mainCtrl"> <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true"> <ui-gmap-marker ng-repeat="m in map.markersr" coords="m" icon="m.icon" idkey="m.id"> </ui-gmap-marker> </ui-gmap-google-map> </div>

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-google-map-container { height: 400px; }

基于 angular-ui 源码 https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/scripts/controllers/issue-74-markers-events.js

【讨论】：

【解决方案2】：

你有一个错字。将“纬度”替换为“纬度”

【讨论】：