角开放层方向标记中的OnClick
[英]OnClick in an angular-openlayers-directive marker
问题描述
Thats it I want to create an onclick event on my marker, I'm using angular-openlayers-directive. 
就是这样，我想在标记上创建一个onclick事件，我正在使用angular-openlayers-directive。
So far I've been able to make some markers show up, but I'm unable to get them after a click event. 到目前为止，我已经能够显示一些标记，但是单击事件之后我无法获取它们。
I would like to perform some actions with these markers custom properties like name, remarks, etc. But it seems too hard to achieve this with openlayers 3. 我想使用这些标记自定义属性（例如名称，备注等）执行一些操作。但是，使用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>
So how could I handle an onclick event on these markers and get all their info, or a reference to the javascript object "marker" itself. 因此，我该如何处理这些标记的onclick事件并获取其所有信息，或对javascript对象“标记”本身的引用。
3 个解决方案
解决方案1
4 2015-07-11 09:19:12
I wasn't sure if you wanted to have the click on the popover or the marker itself. 我不确定您是否要单击弹出框或标记本身。 Below there are instructions for both. 下面有两种说明。 Use the Plunker link at the bottom to see a working demo of both options. 使用底部的Plunker链接查看两个选项的有效演示。
To Register Click on Marker Popover: 要注册，请单击标记弹出框：
If you take a look at the directive, you can see that the marker template uses ng-transclude, so you can do the following: 如果看一下指令，您会发现标记模板使用ng-transclude，因此您可以执行以下操作：
Markup: 标记：
<ol-marker ol-marker-properties="santiago" >
<p ng-click="showDetails(santiago)">Santiago de Compostela</p>
</ol-marker>
In your controller: 在您的控制器中：
$scope.showDetails = function(id) {
alert('lat: '+ id.lat+', '+'lon: '+id.lon);
};
Here I'm passing in the marker object to the showDetails function. 在这里，我将标记对象传递给showDetails函数。 When you click the popover label for Santiago de Compostela in the Plunker Demo, you'll see the corresponding lat/lon in the alert. 当您在Plunker演示中单击Santiago de Compostela的弹出标签时，您将在警报中看到相应的经/纬度。
To Register Click on the Marker: 要注册，请单击标记：
You can add an onClick property to the marker object as follows: 您可以将onClick属性添加到标记对象，如下所示：
In your controller: 在您的控制器中：
finisterre: {
lat: 42.907800500000000000,
lon: -9.265031499999964000,
label: {
show: false,
},
onClick: function (event, properties) {
console.log(properties);
alert('lat: '+ properties.lat+', '+'lon: '+properties.lon);
}
}
When you click the marker associated with finisterre in the Plunker Demo, you'll see the corresponding lat/lon in the alert. 单击“ Plunker演示”中与finisterre相关的标记时，您将在警报中看到相应的经度/纬度。
NOTE: I could only get this to work though under the following conditions: 注意：在以下情况下，我只能使其工作：
- The marker object must have a label property defined 标记对象必须具有定义的label属性
- The show property of the label must be set to false. 标签的show属性必须设置为false。
- The ol-marker html element must have some transcluded content OR the message property must be set in the marker label object. ol-marker html元素必须包含一些已包含的内容， 或者必须在标记标签对象中设置message属性。
I was able to use CSS to prevent the popover from displaying as you can see in the demo, but it seems a little hacky. 我可以使用CSS来防止弹出窗口显示出来，就像在演示中看到的那样，但是似乎有点不客气。 If you want the popover to display on click as well, you're all set, just remove the css hidden class I added and add your pop-over html. 如果您还希望在单击时显示弹出窗口，那么您已经准备就绪，只需删除我添加的CSS hidden类并添加弹出窗口html。
Plunker Demo 柱塞演示
解决方案2
0 2015-07-28 20:14:46
I just got this working today as it happens. 今天，我刚开始工作。 What I am doing for now is adding the properties to my markers once I get them from mongo. 我现在正在做的是，一旦我从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
};
};
}
Once the markers have all the properties they need. 一旦标记具有所需的所有属性。 It just sort of works but I do have a bug to iron out as well where the marker titles repeat above the map for.... reasons. 这只是一种工作，但是我确实有一个错误需要解决，因为...的原因，标记标题在地图上方重复出现。 As you click the markers the words disappear.
当您单击标记时，单词消失。
解决方案3
0 2016-04-17 08:51:03
With the latest release (April 6 2016) of the angular-openlayers-directive library (correct) ngClick -handling seems to be implemented. 在angular-openlayers指令库的最新版本（2016年4月6日）（正确）中，似乎已实现了ngClick -handling 。 After a bit of searching I came up with the following solution: 经过一番搜索，我想到了以下解决方案：
The HTML (simplified): 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>
The Angular Javascript for the map controller (expects that your API endpoint called '/api/markerlist' returns a list of JSON objects with the fields: 'latitude', 'longitude'): 地图控制器的Angular Javascript（期望您的API端点“ / api / markerlist”返回具有以下字段的JSON对象列表：“ latitude”，“ longitude”）：
$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);
}
Finally, be sure that you have included the angular-openlayer-directive CSS, so the messages for the labels are not visible. 最后，请确保您已经包含了angular-openlayer-directive CSS，因此标签的消息不可见。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.