我的想法很简单：
- 我有一张地图作为图像，可以是打印地图的扫描，也可以是维基百科的SVG地图，或者是谷歌地图的屏幕截图
- 我有两个lat/lon坐标，用户点击他们在地图上的位置，所以我知道他们在图像上对应的X/Y位置
现在有趣的部分是：我需要在这张地图上放置一个新的标记，只知道它的纬度/经度坐标。
我不能使用任何Google Maps API或其他JS API，因为地图可以是任何比例的，并且通常不会有相应的缩放因子。
我相信我需要找到图像边界来在地图上定位标记，为此我需要知道地图的比例。我想我有了这个代码，但我没有得到NE经度的准确结果。
// Get NE and SW boundaries for the two known markers
var ne = {lat: Math.max(map.a.lat, map.b.lat), lon: Math.max(map.a.lon, map.b.lon),
x: Math.min(pos.a.x, pos.b.x), y: Math.min(pos.a.y, pos.b.y)};
var sw = {lat: Math.min(map.a.lat, map.b.lat), lon: Math.min(map.a.lon, map.b.lon),
x: Math.max(pos.a.x, pos.b.x), y: Math.max(pos.a.y, pos.b.y)};
// Get boundaries box width and height
var box = {width: sw.x - ne.x, height: sw.y - ne.y};
box.lat_delta = ne.lat - sw.lat;
box.lon_delta = ne.lon - sw.lon;
// Map scale
box.lat_ratio = box.lat_delta / box.height;
box.lon_ratio = box.lon_delta / box.width;
// Get Top-Left and Bottom-Right coordinates of the map
var tl = {
lat: ne.lat + (box.lat_ratio * ne.y),
lon: ne.lon - (box.lon_ratio * ne.x)};
var br = {
lat: sw.lat + (box.lat_ratio * (box.height - sw.y)),
lon: sw.lon - (box.lon_ratio * (box.width - sw.x))};
然后，我如何得到第三个标记的X/Y坐标？我想过做这样的事情：
var x=（map.c.lon-tl.lon）*box.lon_ratio；var y=（map.c.lat-tl.lat）*box.lat_ratio；
但结果没有任何意义。所以我有点迷路了。
答案是：
karto.prototype.getStaticMapBoundingBoxFromTwoPoints = function (point1, point2, width, height)
{
// Coordinates of the inner bounding box containing the two points
var box = {};
var map = {};
// Top left, with lat/longitude as pixel coordinates on full-size Mercator projection
box.tl = {
lat: this.latToY(Math.max(point1.lat, point2.lat)),
lon: this.lonToX(Math.min(point1.lon, point2.lon)),
x: Math.min(point1.x, point2.x),
y: Math.min(point1.y, point2.y)
};
// Bottom right, with lat/longitude as pixel coordinates on full-size Mercator projection
box.br = {
lat: this.latToY(Math.min(point1.lat, point2.lat)),
lon: this.lonToX(Math.max(point1.lon, point2.lon)),
x: Math.max(point1.x, point2.x),
y: Math.max(point1.y, point2.y)
};
// Box width and height
box.width = box.br.x - box.tl.x;
box.height = box.br.y - box.tl.y;
// Horizontal and vertical distance in pixels on full-size projection
var v_delta = box.br.lat - box.tl.lat;
var h_delta = box.br.lon - box.tl.lon;
// Get scale from the distance applied to map size
map.v_scale = v_delta / box.height;
map.h_scale = h_delta / box.width;
// Get map top left
map.topLeft = {
x: box.tl.lon - (box.tl.x * map.h_scale),
y: box.tl.lat - (box.tl.y * map.v_scale)
};
map.topLeft.lat = this.YToLat(map.topLeft.y);
map.topLeft.lon = this.XToLon(map.topLeft.x);
map.bottomRight = {
x: box.br.lon + ((box.width - box.br.x) * map.h_scale),
y: box.br.lat + ((box.height - box.br.y) * map.v_scale)
};
map.bottomRight.lat = this.YToLat(map.bottomRight.y);
map.bottomRight.lon = this.XToLon(map.bottomRight.x);
return map;
};
karto.prototype.getPointXYOnStaticMap = function (lat, lon, map)
{
return {
x: (this.lonToX(lon) - map.topLeft.x) / map.h_scale,
y: (this.latToY(lat) - map.topLeft.y) / map.v_scale
};
};
karto.prototype.getPointLatLongOnStaticMap = function (x, y, map)
{
return {
lat: this.YToLat(map.topLeft.y + (y * map.v_scale)),
lon: this.XToLon(map.topLeft.x + (x * map.h_scale))
};
};