javascript - ionic : mouse event within OpenLayers wasn't handled

Question

我正在尝试使用以下代码处理 OpenStreetMaps 上的双击鼠标事件:

var map = new OpenLayers.Map("basicMap");

var mapnik = new OpenLayers.Layer.OSM();

var fromProjection = new OpenLayers.Projection("EPSG:4326");

// Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913");

// to Spherical Mercator Projection
var position = new OpenLayers.LonLat(13.41,52.52).transform(fromProjection, toProjection);

var zoom = 15;

map.addLayer(mapnik);
map.setCenter(position, zoom );

var markers = new OpenLayers.Layer.Markers( "Markers" );

map.addLayer(markers);

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
{
    defaultHandlerOptions:
    {
        'single': true,
        'double': true,
        'pixelTolerance': 0,
        'stopSingle': false,
        'stopDouble': 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.trigger}, this.handlerOptions);
    },

    trigger: function(e)
    {
        var lonlat = map.getLonLatFromViewPortPx(e.xy);

        alert("clicked");

        alert("Lat, Lon : " + lonlat.lat + ", " + lonlat.lng);

        markers.addMarker(new OpenLayers.Marker(lonlat));
    },

    touchstart: function(e)
    {
        console.log();
    },

    touchend: function(e)
    {
        console.log();
    },

    handleSingle: function(e)
    {
        console.log();
    }
});

var control = new OpenLayers.Control.Click();
map.addControl(control);
control.activate();

但是，经过一些测试后。虽然 map 正确显示，但我在控制台上没有发现任何错误，但从未显示“clicked”消息。

那么上面的代码有什么问题吗？如何解决这个问题？

注意:我使用的是 Ionic 框架。

任何帮助将不胜感激。

谢谢。

Answer 1

OpenLayers.Map 不会触发点击事件。

您应该定义一个“Click”控件(OpenLayers 2 中缺少)，如下所示(来自 http://dev.openlayers.org/examples/click.html )

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
    defaultHandlerOptions: {
        'single': true,
        'double': false,
        'pixelTolerance': 0,
        'stopSingle': false,
        'stopDouble': 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.trigger
            }, this.handlerOptions
        );
    }, 
    trigger: function(e) {
        var lonlat = map.getLonLatFromPixel(e.xy);
        alert("You clicked near " + lonlat.lat + " N, " +
                                  + lonlat.lon + " E");
    }
});

通过将逻辑放入其中或触发点击事件来实现触发器功能。 然后在代码中使用该控件

var control = new OpenLayers.Control.Click();
map.addControl(control);
control.activate();

您可以在此处找到点击处理程序选项 http://dev.openlayers.org/apidocs/files/OpenLayers/Handler/Click-js.html

例如，如果您需要处理双击，则应将 double 属性更改为 true。