Question

我有一个开放图层地图，我想在显示弹出窗口的事件上添加带鼠标的标记。我的代码正在执行此操作，但弹出窗口不会显示在“鼠标悬停”的图标上方。

而是弹出窗口显示在屏幕的远端，稍微移动地图。我添加了一个鼠标移动功能，告诉我光标在屏幕上的位置，鼠标移动事件给出正确的坐标，但鼠标悬停给我的值几乎为零。

我是JavaScript的新手，我完全迷失了我的错误。任何帮助将不胜感激

这是javascript

    map = new OpenLayers.Map("map");
//var layer=  new OpenLayers.Layer.OSM();

 layer = new OpenLayers.Layer.Google(
        "Google Hybrid",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20});
        layer.wrapDateLine=false;
    map.addLayer(layer);
    map.zoomTo(3);

var clat=45.003585;
var clon=6.120495;
var lonlat = new OpenLayers.LonLat(clon,clat).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
map.setCenter(lonlat,18); 

markers = new OpenLayers.Layer.Markers("Cities");               
map.addLayer(markers);  
var location = new OpenLayers.LonLat(6.12053255092622,45.00374430489748).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));            
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
marker=new OpenLayers.Marker(location,icon.clone());


map.addControl(
  new OpenLayers.Control.MousePosition(
  {
        prefix: '<a target="_blank" ' +
          'href="http://spatialreference.org/ref/epsg/4326/">' +
           'EPSG:4326</a> coordinates: ',
        separator: ' | ',
      numDigits: 2,
     emptyString: 'Mouse is not over map.'

            })
        );
 map.events.register("mousemove", map, function(e) 
 {
     position = this.events.getMousePosition(e);
     OpenLayers.Util.getElement("coords").innerHTML = position;
    lonlat = map.getLonLatFromPixel(position).transform(new OpenLayers.Projection("EPSG:900913"),new OpenLayers.Projection("EPSG:4326"));
     OpenLayers.Util.getElement("coords_gps").innerHTML = "lat= " +lonlat.lat +" long= "+lonlat.lon;
 });



//here add mouseover event
marker.events.register('mouseover', marker, function(ev) {
lonlat = map.getLonLatFromPixel(this.events.getMousePosition(ev));
 console.log(this.events.getMousePosition(ev));//.transform(new  OpenLayers.Projection("EPSG:900913"),new OpenLayers.Projection("EPSG:4326")));
 popup = new OpenLayers.Popup.FramedCloud("Popup",
    lonlat,
    null,
    '<div>Hello World! Put your html here</div>',
    null,
    false);
  map.addPopup(popup);
 });
 //here add mouseout event
  marker.events.register('mouseout', marker, function(evt) {popup.hide();});

markers.addMarker(marker);

 map.events.register("click",map, function (e){
  // alert("here");
     position = this.events.getMousePosition(e);
     lonlat = map.getLonLatFromPixel(position).transform(new OpenLayers.Projection("EPSG:900913"),new OpenLayers.Projection("EPSG:4326"));
     $('#lat').val(lonlat.lat);
     $('#lon').val(lonlat.lon);
});

得到鼠标位置返回错误的xy

0 个答案: