我试图使用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}}].
您在使用Angular at,
时有语法错误 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>
这是一个示例
您的位置数据应该看起来像:
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>