javascript - OpenLayers:如何在标记上添加点击和触摸事件

Question

我构建了一个供浏览器使用的移动 map ，因此我需要为每个标记创建一个点击和点击/触摸事件。我试过添加一个点击事件，然后添加一个触摸事件，但它只适用于其中一个。

marker.events.register( 'click', marker, function( evt ) {
    $( '#info' ).html(
        '<p>' + data[i].title + '<br />' + data[i].addr + '</p>'
    );
});
//marker.events.register( 'touchstart', marker, function( evt ) {
//  $( '#info' ).html(
//      '<p>' + data[i].title + '<br />' + data[i].addr + '</p>'
//  );
//});

Answer 1

openlayers.org 网站上有一个示例 - Click Handler Example

您可以创建一个扩展OpenLayers.Control的自定义控件类，并在该类中创建一个使用OpenLayers.Handler.Click来监听点击事件的函数。

Handler.Click实际上会同时监听点击事件和触摸事件。

OpenLayers.Control.ListenToClick = OpenLayers.Class(OpenLayers.Control, {
    defaultHandlerOptions: {
        'single': true,
        'pixelTolerance': 0,
        'stopSingle': false
    },

    initialize: function(options) {
        this.handlerOptions = OpenLayers.Util.extend(
            {}, this.defaultHandlerOptions
        );
        OpenLayers.Control.prototype.initialize.apply(
            this, arguments
        ); 
        this.handler = new OpenLayers.Handler.Click(
            this, {
                'click': this.onClick,
            }, this.handlerOptions
        );
    }, 

    onClick: function(evt) {
        $( '#info' ).html(
            '<p>' + data[i].title + '<br />' + data[i].addr + '</p>'
        );
    },
});

创建它并在需要时添加到 map

var ctmControl = new OpenLayers.Control.ListenToClick({
    handlerOptions: {
        'single': true,
        'pixelTolerance': 0,
        'stopSingle': false
    }
});
map.addControl(ctmControl);

如果这对你来说不够敏感，你可以试试这个

'pixelTolerance': 10,

最后但同样重要的是，记得激活它

ctmControl.activate();

当然，您也可以用同样的方式停用它。

ctmControl.deactivate();