moscowMapAtYandex({
//id блока с картой в качестве фона
mapId:'map',
//точки, координаты, которых известны (не менее двух)
//это "характерные" точки (например точки на МКАДе)
pointArr:[
{
pixel:[102, 292], //в пикселях на картинке (от левого-нижнего угла) (ОХ, OY)
coord:[37.589093, 55.909067] //(Longitude/Latitude) - географические координаты из yandex maps
},
{
pixel:[24, 158],
coord:[37.386533, 55.713611]
}
]
});
function moscowMapAtYandex(setup){
var map = document.getElementById(setup.mapId),
OX1 = setup.pointArr[0].pixel[0],
OX2 = setup.pointArr[1].pixel[0],
OY1 = setup.pointArr[0].pixel[1],
OY2 = setup.pointArr[1].pixel[1],
lon1 = setup.pointArr[0].coord[0],
lon2 = setup.pointArr[1].coord[0],
lat1 = setup.pointArr[0].coord[1],
lat2 = setup.pointArr[1].coord[1],
deltaOX = Math.abs(OX1 - OX2),
deltaOY = Math.abs(OY1 - OY2),
deltaLat = Math.abs(lat1 - lat2),
deltaLon = Math.abs(lon1 - lon2),
oxPixPrice = deltaLon/deltaOX,//"цена" одного пикселя по OX
oyPixPrice = deltaLat/deltaOY,//"цена" одного пикселя по OY
Olon = lon1-OX1*oxPixPrice,//долгота левого-нижнего угла картинки
Olat = lat1-OY1*oyPixPrice;//широта левого-нижнего угла картинки
var pointList = map.getElementsByTagName('a'); //точки на карте
for(i=0; i<=pointList.length-1; i++){
var curPoint = pointList[i],
curPointLon = curPoint.getElementsByTagName('span')[0].innerHTML,//здесь записана долгота из Яндекса
curPointLat = curPoint.getElementsByTagName('span')[1].innerHTML,//здесь записана широта из Яндекса
curPointOX = Math.round((curPointLon-Olon)/oxPixPrice),
curPointOY = Math.round((curPointLat-Olat)/oyPixPrice);
curPoint.style.left = curPointOX+'px';
curPoint.style.bottom = curPointOY+'px';
}
}
Если нужны пояснения - пиши, может помогу.
Мне тут ссылок надавали, но они на английском, я пока не во всех разобрался.
http://stackoverflow.com/questions/2...a-given-picure
