Hey,
I’tried to move a marker with a popup, that works very fine…but when i start to move into the map and scroll around the area, the marker starts moving in all directions… it seesms that the map and the marker aren’t connected or something…i hope you can help me…
var lat=50.0
var lon=10.0
var zoom=11
var map;
var marker;
var popup;
var lonLat;
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 16,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
marker =new OpenLayers.Marker(lonLat,icon);
popup = new OpenLayers.Popup("Test",
new OpenLayers.LonLat(lon,lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),
new OpenLayers.Size(75,35),
"<font size=-2>Lon: "+Math.round(lon * 10000) / 10000+"<br>Lat: "+Math.round(lat * 10000) / 10000);
map.addPopup(popup);
popup.hide();
popup.opacity=0.5;
marker.events.register('mouseover', marker, function (e) { popup.toggle();OpenLayers.Event.stop (evt); } );
layerMarkers.addMarker(marker);
window.setInterval("setMarker()", 3000);
}
function setMarker(){
lon=lon+0.01;
lat=lat+0.01;
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
var newPx = map.getPixelFromLonLat(lonLat);
marker.moveTo(newPx);
popup.moveTo(newPx);
popup.setContentHTML("<font size=-2>Lon: "+Math.round(lon * 10000) / 10000+"<br>Lat: "+Math.round(lat * 10000) / 10000);
}
</script>