正文 

当前位置： 首页 > 问答 >

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

     2023-02-23     161

关键词：

【中文标题】使用 Javascript、jQuery 和/或 php 创建带有基于坐标的标记的地图【英文标题】：Create a map with coordinates-based marker using Javascript, jQuery and/or php 【发布时间】：2013-09-03 13:53:06 【问题描述】：

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

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

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

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

【问题讨论】：

看看MapBox。您可以创建自己的地图和标记，然后将其与Leaflet.js 或Mapbox.js 一起使用以创建漂亮的客户端地图。 【参考方案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 才能使用它。更多信息在上一个链接中

【讨论】：

【参考方案2】：

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

【讨论】：

能否在链接中总结相关细节，以防内容发生变化或消失？

使用 JavaScript 或 jQuery 获取当前月份的第一个和最后一个日期 [重复]

】使用JavaScript或jQuery获取当前月份的第一个和最后一个日期[重复]【英文标题】：GetfirstandlastdateofcurrentmonthwithJavaScriptorjQuery[duplicate]【发布时间】：2012-11-1408:01:18【问题描述】：正如标题所说，我一直在寻找一种方法来使用JavaSc... 查看详情

如何使用 Javascript 或 Jquery 获取网页图标/ Apple 触摸图标和标题？

】如何使用Javascript或Jquery获取网页图标/Apple触摸图标和标题？【英文标题】：Howtogetfaviconicon/Apple-touchiconandtitleofawebpageusingJavascriptorJquery?【发布时间】：2014-05-2018:55:57【问题描述】：我可以在div或IFrame中插入整个网页：<iframesr... 查看详情

部署 jquery 或 javascript 前端项目

】部署jquery或javascript前端项目【英文标题】：deployjqueryorjavascriptfront-endproject【发布时间】：2022-01-1603:06:56【问题描述】：我在管理面板项目中使用adminlte管理模板。adminlte是使用jquery、javascript和bootstrap开发的。我开发了一个前... 查看详情

使用 Jquery 或 Javascript 保存数据

】使用Jquery或Javascript保存数据【英文标题】：SavingdatausingJqueryorJavascript【发布时间】：2018-07-0401:38:21【问题描述】：除了setlocalstorage之外，还有什么方法可以使用Jquery或javascript来保存变量？例如：我有一个在线产品目录网站。... 查看详情

如何使用 c# 或 jQuery 或 Javascript 获取客户端系统/PC 域名和 PC 名称

】如何使用c#或jQuery或Javascript获取客户端系统/PC域名和PC名称【英文标题】：HowtogetClientSystem/PCDomainandPCNameusingc#orjQueryorJavascript【发布时间】：2020-05-0322:51:44【问题描述】：IPGlobalPropertiesproperties=IPGlobalProperties.GetIPGlobalProperties();En 查看详情

javascript使用jquery设置或清除加载，聚焦和模糊的输入值(代码片段)

查看详情

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

】使用Javascript、jQuery和/或php创建带有基于坐标的标记的地图【英文标题】：Createamapwithcoordinates-basedmarkerusingJavascript,jQueryand/orphp【发布时间】：2013-09-0313:53:06【问题描述】：我正在开发一个客户端-服务器应用程序，我需要创建... 查看详情

如何使用 JavaScript 或 jQuery 在 html 中使用 datepicker 按年月和日填充年龄

】如何使用JavaScript或jQuery在html中使用datepicker按年月和日填充年龄【英文标题】：HowcanIpopulateagebyyearsmonthsanddaysusingdatepickerinhtmlusingJavaScriptorjQuery【发布时间】：2018-01-0300:51:27【问题描述】：我想知道如何获得它？例如我的生日... 查看详情

如何在 javascript 或 jquery 中显示和隐藏站点标题

】如何在javascript或jquery中显示和隐藏站点标题【英文标题】：howcanishowandhidesiteheaderinjavascriptorjquery【发布时间】：2021-08-1203:57:54【问题描述】：我正在研究一个Bootstrap用例。我使用Bootstrap设计了一个菜单。我希望向下滚动时隐... 查看详情

如何使用 jQuery（或 Javascript）获取可见文本？

】如何使用jQuery（或Javascript）获取可见文本？【英文标题】：HowdoIgetjustthevisibletextwithjQuery(orJavascript)?【发布时间】：2010-12-2304:51:51【问题描述】：我有网站可以转换JapaneseKanjiintoRomaji(romanletters):输出显示和隐藏用户需要根据输... 查看详情

使用 JavaScript 或 jQuery 检测哪个表单输入具有焦点

】使用JavaScript或jQuery检测哪个表单输入具有焦点【英文标题】：DetectwhichforminputhasfocususingJavaScriptorjQuery【发布时间】：2010-09-2603:57:50【问题描述】：如何？在一个函数中，我希望能够确定哪个表单输入具有焦点。我希望能够在... 查看详情

仅使用 jQuery 或 Javascript 刷新 div

】仅使用jQuery或Javascript刷新div【英文标题】：RefreshdivONLYwithjQueryorJavascript【发布时间】：2020-02-0106:45:18【问题描述】：我已经浏览了很多关于这个的帖子，但我找不到任何适合我的东西。我正在尝试仅刷新div部分没有PHP文件。... 查看详情

jQuery或javascript查找页面的内存使用情况

】jQuery或javascript查找页面的内存使用情况【英文标题】：jQueryorjavascripttofindmemoryusageofpage【发布时间】：2011-02-0113:56:11【问题描述】：有没有办法找出网页或我的jquery应用程序正在使用多少内存？这是我的情况：我正在使用一个... 查看详情

如何防止使用 jQuery 或 Javascript 进行双重提交？

】如何防止使用jQuery或Javascript进行双重提交？【英文标题】：HowcanIpreventadoublesubmitwithjQueryorJavascript?【发布时间】：2011-02-0719:17:13【问题描述】：由于不耐烦的用户多次单击提交按钮，我的数据库中不断出现重复条目​​。我用... 查看详情

如何使用 jquery 或 javascript 隐藏 div？

】如何使用jquery或javascript隐藏div？【英文标题】：Howtohidedivusingjqueryorjavascript?【发布时间】：2014-10-3105:50:29【问题描述】：您好，如果值为0.00，我想隐藏一个跨度和一个div。这是我的代码<spanclass="price-old"><%=getCurrentAttribu... 查看详情

MyWebsite 如何发布 jQuery 或 AngularJS 的 javascript 包，该网站和网站可以使用，而不会发生冲突？

】MyWebsite如何发布jQuery或AngularJS的javascript包，该网站和网站可以使用，而不会发生冲突？【英文标题】：HowcanMyWebsiteshipajavascriptpackagejQueryorAngularJS,thatwebsiteAandwebsiteBcanuse,withoutconflicts?【发布时间】：2014-10-0913:13:33【问题描述】... 查看详情

Jquery 或 Javascript mvc

】Jquery或Javascriptmvc【英文标题】：JqueryorJavascriptmvc【发布时间】：2013-04-2300:49:08【问题描述】：我在后端使用laravel构建hr、accounts和其他管理系统。Ajax在许多页面中用于分页、crud操作和其他目的，但网站并不完全基于ajax。主干... 查看详情

在 JavaScript 或 jQuery 中增加和减少数量时如何计算价格？

】在JavaScript或jQuery中增加和减少数量时如何计算价格？【英文标题】：HowtocalculatepricewhenincreaseanddecreasequantityinJavaScriptorjQuery?【发布时间】：2021-10-0105:15:42【问题描述】：当用户尝试增加或减少产品数量时，我有一个计算价格的... 查看详情