Question

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

Answer 1

使用angular at，

时出现语法错误

q_form_val 应 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>

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>

无法使用ng-map显示多个标记

2 个答案: