javascript - 使用 Javascript、jQuery 和/或 php 创建带有基于坐标的标记的地图

Question

我正在开发一个客户端-服务器应用程序，我需要创建或获取一个基于 lat 和 lang 的带有一些标记（例如只有红点）的地理地图。

我一直在网上寻找，但我找不到任何适合我的东西。

我可以使用谷歌地图来做到这一点，但我认为我不能使用我自己的自定义地图图像和我的自定义标记。

但是，这是我或多或少想做一些坐标的例子：

Answer 1

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 才能使用它。上一个链接中的更多信息

Answer 2

看看Slippy Map On Canvas项目，它是一个使用 HTML5 实现的滑动瓷砖地图。您可以配置自己的地图和标记，它还支持许多其他可能对您有用的功能。