在ng-repeat中解析的Javascript语句行为不正确

时间:2015-11-18 22:16:41

标签: javascript angularjs google-maps-api-3 angularjs-ng-repeat

我正在使用ngMap根据对象列表observations使用配对标记和InfoWindows填充Google地图。以下示例如here,但使用我的控制器生成数据。我的observations有一个纬度/经度位置和一个唯一的时间戳created_at。我使用ng-repeat与同一个对象一起创建每对Marker和InfoWindow,并使用其时间戳为InfoWindow创建一个唯一的ID。

每个Marker的onClick处理程序都应该打开相应的InfoWindow。但结果是每个标记打开第一个InfoWindow的副本(但正确锚定到单击的标记)。

视图如下所示:

<ng-map center="United States" zoom="4">
    <marker
      ng-repeat-start="obs in gmap.observations"
      position="{{obs.latitude}},{{obs.longitude}}"
      on-click="gmap.map.showInfoWindow('info_{{obs.created_at}}')" />
    <info-window
      ng-repeat-end
      id="info_{{obs.created_at}}">
      <div ng-non-bindable="">
        <h3>{{obs.created_at}}</h3>
      </div>
    </info-window>
  </ng-map>

这里的数据来自HTTP响应,没什么特别的:

$http.get(url).then(function(response) {
    $scope.gmap.observations = response.data.data;
    console.log("Loaded observations: " + $scope.gmap.observations.length);
}, function(err) { console.log("Error getting observations: " + err)});

在Firebug中生成的HTML:

<marker class="ng-scope" on-click="gmap.map.showInfoWindow('info_1425398401044')" position="39.1948882,-106.8210516" ng-repeat-start="obs in gmap.observations" style=""></marker>
<info-window id="info_1425398401044" class="ng-scope" ng-repeat-end="" style="display: none;">

<marker class="ng-scope" on-click="gmap.map.showInfoWindow('info_1425485573770')" position="39.194893,-106.8210517" ng-repeat-start="obs in gmap.observations"></marker>
<info-window id="info_1425485573770" class="ng-scope" ng-repeat-end="" style="display: none;">

<marker class="ng-scope" on-click="gmap.map.showInfoWindow('info_1425485631669')" position="39.1949009,-106.8210548" ng-repeat-start="obs in gmap.observations"></marker>
<info-window id="info_1425485631669" class="ng-scope" ng-repeat-end="" style="display: none;">

<marker class="ng-scope" on-click="gmap.map.showInfoWindow('info_1425924554521')" position="39.19467013,-106.82140428" ng-repeat-start="obs in gmap.observations"></marker>
<info-window id="info_1425924554521" class="ng-scope" ng-repeat-end="" style="display: none;">

...

正如您所看到的,每个标记在其点击回调中都有正确的唯一ID参数,但每个标记都会打开第一个InfoWindow,其中包含1425398401044。

1 个答案:

答案 0 :(得分:1)

我遇到了使用嵌套数组显示纬度和经度的类似问题。这样我就能用一个变量分配位置。

在你的例子中我会修改
position="{{obs.latitude}},{{obs.longitude}}"

position="{{obs}}"

在js文件中,将obs数组更改为包含元组。每个元组应该有两个数字。第一个数字是纬度,第二个数字是经度。