离子：内的OpenLayers鼠标事件没有处理

Question

我试图在开放街道地图处理鼠标双击事件，使用下面的代码：

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

然而，做一些测试后。虽然在地图显示正确的情况下我没有在控制台上发现任何错误，但从未显示“点击”消息。

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

注意：我正在使用Ionic框架。

任何帮助将不胜感激。

谢谢。

Answer 1

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

您应该定义一个“点击”控制（失踪的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

找到单击处理选项。例如，如果你需要处理双击，你应该双重属性更改为true。