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();

然而，经过一些测试。消息＆＃34;点击＆＃34;虽然在地图显示正确时我没有在控制台上发现任何错误，但从未显示过。

上面的代码中有什么问题吗？怎么可能解决这个问题？

注意：我使用的是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。

Ionic：OpenLayers中的鼠标事件未得到处理

1 个答案: