OpenLayers：如何在標記上添加點擊和觸摸事件

Question

我建立了一個供移動瀏覽器使用的地圖，因此我需要為每個標記單擊和點擊/觸摸事件。 我試過添加一個click事件，然后添加一個touch事件，但是它僅適用於其中之一。

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網站上有一個示例- 單擊處理程序示例

您可以創建擴展OpenLayers.Control的自定義控件類，並在使用OpenLayers.Handler.Click的類中創建一個函數以偵聽click事件。

Handler.Click實際上將同時監聽click事件和touch事件。

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>'
        );
    },
});

創建它並在需要時添加到地圖

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

如果那對您還不夠敏感，可以嘗試一下

'pixelTolerance': 10,

最后但並非最不重要的一點，請記住將其激活

ctmControl.activate();

當然，您可以用相同的方式將其停用。

ctmControl.deactivate();