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

【问题标题】：LEAFLET maps and markers with select options - ANGULARjs带有选择选项的 LEAFLET 地图和标记 - ANGULARjs
【发布时间】：2016-05-12 14:08:55
【问题描述】：

我有一个带有传单地图的应用程序，用于在地图上显示我的所有项目（我设置了带有信息的弹出标记）。现在，当客户来到页面时，他需要搜索地图并选择标记。在弹出窗口中，我将勾选复选框。现在，我的问题是，当我放置另一个 div 时，我需要在其中列出所选项目。我需要选择标记并仅显示它。对此的最佳解释是map。

【问题讨论】：

您能出示您的代码吗？很难猜出哪里出了问题
嗨，这里是 plunkr plnkr.co/edit/SZafhYgLzWyFamdkrWJ0 的链接。我不知道如何将地图添加到 plunkr

标签： javascript angularjs leaflet angular-leaflet-directive

【解决方案1】：

在this example 之后，您可以使用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
}

这有点“hacky”，因为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

【讨论】：

非常感谢。这就是我需要的。 ☺