LEAFLET地图和带有选择选项的标记-ANGULARjs

Question

我有一个带有传单地图的应用程序，可以在地图上显示我的所有物品（我用弹出式信息设置了标记）。现在，当客户到达页面时，他需要搜索地图并选择标记。在弹出窗口中，我将选中复选框。现在，我的问题是，当我放置另一个div时，我需要在其中列出所选项目。我需要选择标记并只显示它。最好的解释是这张地图。

Answer 1

根据此示例，您可以使用getMessageScope指定一个带有Angular模板的弹出标记，该模板在与应用程序相同的$scope中工作。然后，您可以在HTML元素上使用所有ng-属性。我为每个标记添加了一个added属性，该属性指示用户是否使用ng-model选择了该标记（单击了复选框）。

amarker:{
  lat: 53.5510,
  lng: 9.9936,
  zoom: 8,
  message: '{{ markers.amarker.options.name }}<br/> <input type="checkbox" ng-model="markers.amarker.added"/>Add',
  getMessageScope: function() { return $scope; },
  options:{
    name: "Marker A"
  },
  added: false
}

这有点"黑客"，因为message中没有对标记的引用，这就是为什么你必须在这里使用markers.<marker id>。

然后，当您列出所有标记时，只需过滤added属性：

<ul>
  <li ng-repeat="(markerid,marker) in markers" ng-if="marker.added">{{marker.options.name}}</li>
</ul>

此处演示：https://plnkr.co/edit/I4CB3tSiViKTiKt1xCXD