【问题标题】：OnClick in an angular-openlayers-directive markerOnClick 在 angular-openlayers-directive 标记中
【发布时间】：2015-07-10 22:51:38
【问题描述】：

就是这样，我想在我的标记上创建一个 onclick 事件，我正在使用 angular-openlayers-directive。

到目前为止，我已经能够显示一些标记，但是在点击事件之后我无法获得它们。

我想使用这些标记自定义属性（如名称、备注等）执行一些操作。但使用 openlayers 3 实现这一点似乎太难了。

 <openlayers ol-center="ven" height="100vh">
    <ol-layer ol-layer-properties="wms">
      <ol-marker ng-repeat="marker in markers"
                 lat="marker.lat"
                 lon="marker.lon"
        ></ol-marker>
    </ol-layer>
  </openlayers>

那么我如何处理这些标记上的 onclick 事件并获取它们的所有信息，或对 javascript 对象“标记”本身的引用。

【问题讨论】：

嗨，这对你有用吗？

标签： javascript angularjs openlayers-3

【解决方案1】：

我不确定您是否希望点击弹出框或标记本身。下面是两者的说明。使用底部的 Plunker 链接查看两个选项的工作演示。

注册点击标记弹出框：

如果你看一下指令，你可以看到标记模板使用了 ng-transclude，所以你可以这样做：

标记：

<ol-marker ol-marker-properties="santiago" >
  <p ng-click="showDetails(santiago)">Santiago de Compostela</p>
</ol-marker>

在您的控制器中：

$scope.showDetails = function(id) {
  alert('lat: '+ id.lat+', '+'lon: '+id.lon);
};

这里我将标记对象传递给 showDetails 函数。当您在 Plunker Demo 中单击 Santiago de Compostela 的弹出框标签时，您将在警报中看到相应的纬度/经度。

点击标记注册：

您可以向标记对象添加 onClick 属性，如下所示：

在您的控制器中：

finisterre: {
  lat: 42.907800500000000000,
  lon: -9.265031499999964000,
  label: {
    show: false,
  },
  onClick: function (event, properties) {
    console.log(properties); 
    alert('lat: '+ properties.lat+', '+'lon: '+properties.lon);
  }
}

当您在 Plunker 演示中单击与 finisterre 关联的标记时，您将在警报中看到相应的纬度/经度。

注意： 我只能在以下条件下让它工作：

标记对象必须定义一个标签属性
标签的 show 属性必须设置为 false。
ol-marker html 元素必须有一些嵌入的内容或必须在标记标签对象中设置消息属性。

正如您在演示中看到的那样，我能够使用 CSS 来阻止弹出框的显示，但它似乎有点 hacky。如果您希望在点击时也显示弹出框，那么您已经准备就绪，只需删除我添加的 css hidden 类并添加您的弹出框 html。

Plunker Demo

【讨论】：

【解决方案2】：

我今天刚刚完成了这项工作。我现在正在做的是将属性添加到我的标记中，一旦我从 mongo 获得它们。

function addMarkerProperties ()
// needed to enable click events on a marker!
// Have a label property defined for the marker.
// Have the show property of the label set to false.
// Have some transcluded content in the marker.
{
  for (var i = $scope.markers.length - 1; i >= 0; i--) {
    $scope.markers[i].onClick = function (event, properties) { console.log('Clicked a marker'); console.log(this); console.log(properties); };
    $scope.markers[i].label = { 
    // Note: Duplication of data here @ message. Fix this later.
    "message": $scope.markers[i].name,
  "show": false,
  "showOnMouseOver": false
  };
  };
}

一旦标记具有他们需要的所有属性。它只是有点工作，但我确实有一个错误需要解决，因为标记标题在地图上方重复出现......原因。当您单击标记时，单词会消失。

【讨论】：

我遇到了那个错误，原因是缺少隐藏这些标题的 CSS

【解决方案3】：

随着 angular-openlayers-directive 库的最新版本（2016 年 4 月 6 日）（正确）ngClick 处理似乎已实现。经过一番搜索，我想出了以下解决方案：

HTML（简体）：

<html ng-controller="mapController">
    <openlayers width="100%" height="400px">
        <ol-marker ng-repeat="marker in markers" ol-marker-properties="marker" ng-click="showDetails(marker)"></ol-marker>
    </openlayers>
</html>

地图控制器的 Angular Javascript（期望您的名为“/api/markerlist”的 API 端点返回一个 JSON 对象列表，其中包含以下字段：“纬度”、“经度”）：

$scope.markers = [];

$scope.initializeMarkers = function() {    
var markerList = $http.get("yoursite/api/markerlist")
.succes( function(result) {    
 angular.forEach(result, function(value, key) {
                        $scope.markers.push({
                            lat: value.latitude,
                            lon: value.longitude,
                            label: {
                                message: "Your message",
                                show: false,
                                showOnMouseOver: false
                            }
                        });
                });

}

function showDetails(marker) {
    alert('Clicked a marker on the map');
    console.log(marker);
}

最后，确保您已包含 angular-openlayer-directive CSS，因此标签的消息不可见。

【讨论】：