Question

Я пытаюсь использовать ng-карту для динамического отображения нескольких маркеров следующим образом.

<div class="panel-body" style="height:300px"> 
     <map ng-transclude class='google-map' center='map.center' zoom="map.zoom"> 
      <marker ng-repeat="pos in tabledata" position="{{pos.lat}}, {{pos.lng}}"></marker> 
     </map> 
    </div> 

Код контроллера выглядит следующим образом.

$http({ 
     method: "GET", 
     url: "http://xx.xxx.x.xx:3000/abc", 
     params:{parameters} 
    }).then(function(success){ 
     $scope.tabledata = success.data; 
    },function(error){ 
     console.log('error ' + JSON.stringify(error)); 
    }); 

Я получаю ошибку, как Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{pos.lat}}, {{pos.lng}}] starting at [{pos.lat}}, {{pos.lng}}].

Answer 1

У вас есть синтаксические ошибки в использовании углового на,

position="{{pos.lat}}, {{pos.lng}}" должен быть position="{{[pos.lat, pos.lng]}}"

<marker ng-repeat="pos in tabledata" position="{{pos.lat}}, {{pos.lng}}"></marker>

Эта линия должна быть,

<marker ng-repeat="pos in tabledata" position="{{[pos.lat,pos.lng]}}"></marker>

Таким образом, код будет,

<div class="panel-body" style="height:300px"> 
     <map ng-transclude class='google-map' center='map.center' zoom="map.zoom"> 
      <marker ng-repeat="pos in tabledata" position="{{[pos.lat, pos.lng]}}"></marker> 
     </map> 
    </div> 

HERE IS AN EXAMPLE

Answer 2

Данные позиции должны выглядеть следующим образом:

pos = [40.71, -73.21] 

Так вы необходимо преобразовать данные в определение массива. Добавьте эту функцию к контроллеру:

$scope.getCoordinates = function(oldPos){ 
    var newPos : [oldPos.lat,oldPos.lng]; 
    return newPos; 
} 

и использовать его в положении:

<marker ng-repeat="pos in tabledata" position="getCoordinates(pos)"></marker>