我正在使用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。
答案 0 :(得分:1)
我遇到了使用嵌套数组显示纬度和经度的类似问题。这样我就能用一个变量分配位置。
在你的例子中我会修改
position="{{obs.latitude}},{{obs.longitude}}"
是
position="{{obs}}"
在js文件中,将obs数组更改为包含元组。每个元组应该有两个数字。第一个数字是纬度,第二个数字是经度。