Question

我正在尝试使用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}];});

Answer 1

如果用'ui-google-maps库为角'，你的意思是 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

Answer 2

你有一个错字。替换＆＃34; Latitide＆＃34;用＆＃34;纬度＆＃34;

ui-gmap-markers仅显示一个标记

2 个答案: