具有 select 选项的 LEAFLET 地图和标记 - ANGULARjs

Question

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

Answer 1

在 this example 之后，您可以指定一个带有 Angular 模板的弹出窗口的标记，该模板在与您的应用程序相同的 $scope 中工作，使用 getMessageScope。然后，您可以在 HTML 元素上使用所有 ng- 属性。我使用 ng-model.

向每个标记添加了一个 added 属性，指示用户是否选择了该标记（单击复选框）

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

具有 select 选项的 LEAFLET 地图和标记 - ANGULARjs

LEAFLET maps and markers with select options - ANGULARjs

javascript

angularjs

leaflet

angular-leaflet-directive