angular-openlayers-directive标记中的OnClick
这就是我想要在我的标记上创建一个onclick事件，我正在使用angular-openlayers directive。
到目前为止，我已经能够显示一些标记，但我无法在单击事件后获得它们。
我想用这些标记执行一些动作，比如名字，备注等，但是使用openlayer 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对象“标记”本身的引用。
回答 3
Stack Overflow用户
发布于 2015-07-11 17:19:13
我不确定你是想点击弹出窗口，还是想点击标记本身。下面有这两种方法的说明。
要注册，请单击标记弹出窗口：
如果您查看该指令，您可以看到标记模板使用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 的弹出标签时，您将在警报中看到相应的经度/纬度。
要注册，请单击标记：
控制器中的：
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关联的标记时，您将在警报中看到相应的经度/经度。
我可以使用CSS来阻止弹出窗口显示，就像你在演示中看到的那样，但它看起来有点老生常谈。如果你想在点击时也显示弹出窗口，那么你已经准备好了，只需删除我添加的css hidden类并添加你的弹出窗口。
Plunker Demo
Stack Overflow用户
发布于 2015-07-29 04:14:46
我今天碰巧把它弄好了。我现在要做的是，一旦我从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
};
};
}一旦标记拥有了它们所需的所有属性。它只是一种工作，但我确实有一个错误，以及解决的地方，标记标题重复地图上的……原因。
当您单击标记时，单词将消失。
Stack Overflow用户
发布于 2016-04-17 16:51:04
随着angular-openlayers directive library (正确)的最新版本(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>map控制器的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，因此标签的消息是不可见的。
https://stackoverflow.com/questions/31351494
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号