Angular-leaflet-directive 语法错误：表达式第 2 列的标记“{”无效键答案

【问题标题】：Angular-leaflet-directive syntax Error: Token '{' invalid key at column 2 of the expressionAngular-leaflet-directive 语法错误：表达式第 2 列的标记“{”无效键
【发布时间】：2015-12-08 07:19:19
【问题描述】：

我在使用 angular-leaflet-directive 创建多个地图时遇到问题。

我有城市列表，我想使用 ng-repeat 显示许多地图。

这是代码

<div ng-repeat="(key,city) in listCity" class="panel panel-info col-md-2" style=" height: 25%;">
      <div class="panel-heading">{{city.name}}</div>
      <div class="panel-body" style="width: 100%; height: 100%;">
          <leaflet style="width: 100%; height: 90%;" center="{{city.place_id}}"></leaflet>
      </div>
    </div>

它警告错误Syntax Error: Token '{' invalid key at column 2 of the expression [{{city.place_id}}] starting at [{city.place_id}}]。当我通过用其他字符串更改“中心”进行测试时，它没有错误。

请帮我解决它。

非常感谢！！！！！！！

【问题讨论】：

您能否设置一个 Plunk 或其他东西来为我们提供更多信息，或者至少提供 listCity 中包含的内容的示例数据？
这是列表 City{ 'name' : 'West Jakarta City', 'lat' : '-6.168872', 'lng' : '106.756572', 'place_id' : 'ChIJ7x9CSLj3aS4RmvSqYhrWPhg' 的样本数据}
angular.extend($scope,{ ChIJ7x9CSLj3aS4RmvSqYhrWPhg: { // 位置 ACEH lat: -6.168872, lng: 106.756572, zoom: 12, place_id: 'ChIJB0vJuDb0aS4RlHPzGrFt85A' } })pan>
一个基本的 Plunk（或类似的）最好，有一个“可以”工作的样本。

标签： mean.io angular-leaflet-directive

【解决方案1】：

根据example in the docs，您必须在您的中心物业中提供lat、lng 和zoom。

所以试试这样的：

<div ng-repeat="city in listCity" class="panel panel-info col-md-2" style=" height: 25%;">
    <div class="panel-heading">{{city.name}}</div>
    <div class="panel-body" style="width: 100%; height: 100%;">
        <leaflet style="width: 100%; height: 90%;" center="{ lat: city.lat, lng: city.lng, zoom: 10 }"></leaflet>
    </div>
</div>

我假设您的 listCity 是一个数组。

【讨论】：