Plunker Demo

Question

多数民众赞成我想在我的标记上创建一个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对象＆＃34; marker＆＃34;本身。

Answer 1

我不确定你是否想要点击弹出窗口或标记本身。下面有两者的说明。使用底部的Plunker链接查看两个选项的工作演示。

注册点击Marker Popover：

如果您查看该指令，可以看到标记模板使用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演示中单击 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元素必须包含一些被转换的内容 OR 必须在标记标签对象中设置message属性。

我能够使用CSS来防止弹出窗口显示，你可以在演示中看到，但它似乎有点hacky。如果你想要在点击时显示弹出窗口，那么你已经完成所有设置，只需删除我添加的css hidden课程并添加你的pop-over html。

Plunker Demo

Answer 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
  };
  };
}

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

Answer 3

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

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端点名为＆＃39; / api / markerlist＆＃39;返回一个JSON对象列表，其中包含以下字段：＆＃39; latitude＆＃39;，＆＃39 ;经度＆＃39）：

$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，因此标签的消息不可见。

OnClick in angular-openlayers-directive标记

3 个答案:

注册点击Marker Popover：

注册单击标记：

Plunker Demo