無法使用ng-map顯示多個標記

我想要使用ng-map動態顯示多個標記，如下所示。無法使用ng-map顯示多個標記

<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}}].

來源

2017-02-20 Satya Narayana

什麼是success.data？你能向我們展示console.log（成功）; – hurricane

success.data是[{ 「LAT」：「12.32323」，「LNG」：「67.45342」}，{ 「LAT」：「12.7777777」，「LNG」：「56.12335235」}，{ 「LAT」：「14.3452323」，「lng」：「56.88888」}] –

您可以使用我的答案。 – hurricane

你必須使用的角度在一個語法錯誤，

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

來源

2017-02-20 11:54:52 Sravan

但是我得到錯誤：[$解析：語法]語法錯誤：令牌「」是在表達的8列中的意外的標記[pos.lat，pos.lng]上述製備之後在開始[，pos.lng]更改。 –

試，'<標記納克重複= 「在資料表POS」位置= 「{{[pos.lat，pos.lng]}}」>' – Sravan

@SatyaNarayana，請查看我更新的答案。 – Sravan

您的位置數據應該是這樣的：

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>

來源

2017-02-20 11:56:36 hurricane

我在控制器函數中使用this.getCoordinates = function（oldPos）{return [oldPos.lat，oldPos.lng];}並將標記標記更改爲。我得到錯誤：[$ rootScope：infdig] 10 $ digest（）迭代達到。中止！觀察者在最近的5次迭代中觸發了：[[{「msg」：「fn：regularInterceptedExpression」，「newVal」：[「12.32323」，「67.45342」]，「oldVal」：[「12.32323」，「67.45342」]} .... –

@SatyaNarayana在控制器將字符串轉爲浮動 – hurricane

同樣的問題在重複。錯誤：[$ rootScope：infdig] 10達到了$ digest（）迭代。中止！觀察者在最後5次迭代中解僱了：[[{「msg」：「fn：regularInterceptedExpression」，「newVal」：[12.32323,67.45342]，「oldVal」：[12.32323,67.45342]} –

無法使用ng-map顯示多個標記

回答

相關問題