如何在OpenLayers-2中显示鼠标位置作为工具提示?


10

我想将地图坐标作为OpenLayers中的鼠标悬停效果。我正在使用以下代码。但是它显示像素坐标:

    map.events.register("mousemove", map, function(e) {      
      var position = e.map.x + e.xy.y;
      OpenLayers.Util.getElement("tooltip").innerHTML = position 
    });

哇7k的意见,只有4票?
低于雷达2014年

Answers:



11

要添加到simo的答案中,下面是一个示例:

map.events.register("mousemove", map, function (e) {
    var position = e.map.getLonLatFromViewPortPx(e.xy);
    OpenLayers.Util.getElement("tooltip").innerHTML = "<label>Latitude: " + position.lat + "</label><br/><label>Longitude: " + position.lon + "</label>";
});

您可能需要像我一样从Mercator转换为Geographic ...如果是这样:

var position = e.map.getLonLatFromViewPortPx(e.xy).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));

5

从Openlayers 2.12开始,以下方法可用于悬停访问坐标:

map.events.register("mousemove", map, function (e) {            
var point = map.getLonLatFromPixel( this.events.getMousePosition(e) )     
    console.log(point.lon, point.lat)
});

1

在Openlayers 2.13中,您可以像这样:

map.addControl(
    new OpenLayers.Control.MousePosition({
        prefix: 'Coords: ',
        separator: ' | ',
        numDigits: 2,
        emptyString: 'Mouse not over map'
    })
);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.