我正在开发一个客户端-服务器应用程序，我需要创建或获取一个基于 lat 和 lang 的带有一些标记（例如，只是红点）的地理地图。
我一直在网上寻找，但找不到适合我的东西。
我可以使用谷歌地图做到这一点，但我认为我不能使用我自己的自定义地图图像和我的自定义标记。
但是，这是一个我或多或少想做一些坐标的例子：
【问题讨论】：
标签： javascript canvas geolocation maps
http://www.morrisda.com/?post=pointmap
这里解释了我是如何做到这一点的。举个例子！
这里源码：
function make_pointers(latitude, longitude) {
targetmap = document.getElementById("point_map");
//it's sure it will work when your map is a perfec square, so it's got height on the x and on the y for usefull debugging.
var asseX = $('#point_map').height()
var asseY = $('#point_map').height()
//lat and lang from imput
lang = longitude;
lat = latitude;
var source = new Proj4js.Proj('EPSG:4326'); //source coordinates will be in Longitude/Latitude, WGS84
var dest = new Proj4js.Proj('EPSG:3785'); //destination coordinates in meters, global spherical mercators projection, see http://spatialreference.org/ref/epsg/3785/
var mercator_object = new Proj4js.Point(lang,lat); //any object will do as long as it has 'x' and 'y' properties
Proj4js.transform(source, dest, mercator_object);
give_top = 19971868.8804*2 //this is how a meridian is long.
mercator_longitude = mercator_object.y //this is longitude by mercator
//this switch is if latitude is negative;
if (mercator_object.y > 0) {mercator_object.y = mercator_object.y + give_top/2}
if (mercator_object.y < 0 ) {mercator_object.y = give_top/2 + mercator_object.y}
//this is my lovely proportion, value of give_top is length of a meridian
mercator_distance = (asseY*mercator_longitude)/give_top;
//distance from 0:
y = asseY/2 - mercator_distance;
//proportion to make working on x;
//(180 + lang) makes lang from 0 to 360 instead of -180, +180.
//to understand, now image equator as a line, long 360.
//now we divide our coords (from 0 to 360) for 360, and the result is how far is this point from 0 on a 360-long line.
//now a simple proportion, and we get this distance on a line long like x axis, which is the width of our map.
// % is a Modulus (division remainder)
normalized_x_coords = (180 + lang)
x = (asseX * normalized_x_coords/ 360) % asseX;
//let's put this little points on my map (subtract -3 cause our point is large 6.)
console.log(x); //this is distance from left border;
console.log(y) //this is distance from bottom border
}
请记住，您需要 jQuery 和 ProJ4js 才能使用它。更多信息在上一个链接中
【讨论】：
查看Slippy Map On Canvas 项目，该项目是使用 HTML5 实现的滑动图块地图。您可以配置自己的地图和标记，它还支持许多其他可能对您有用的功能。
【讨论】：