查看原文
其他

清仓送啦,经纬度拾取器(含源码)公开自取:并支持一键导航、微信收藏、转发

困难群众 LBS 2022-10-06

广告:仆力思警营纪念品商城


清仓啦,老编把一些可公开、简易常用的小工具,连同源码贴出来,有需要同学的自行拿去用。

今天是第一波:经纬度拾取器 + 一键发起导航 + 地点微信收藏

小工具可单独使用,点击“阅读原文”链接直达Demo页面。

也可快速接入您的其它应用中。

声  明
  • 本工具用途:根据已知的经纬度坐标,在地图上展示位置,并可一键唤起导航,本工具适配了手机端,更便于使用;

  • 本工具为纯HTML+JS技术,您只需申请一个腾讯QQ地图开发者的Key即可部署到您的应用中;

  • 本工具居于开源的腾讯地图JS API开发,该API为公开接口,任何单位、个人均可自由使用,所以本工具不存在泄露国家秘密、公民隐私问题,不违反法律法规;


其它互联网公司也有同类工具,均公开可用:
百度坐标拾取器:http://api.map.baidu.com/lbsapi/getpoint/index.html腾讯地图坐标拾取器:https://lbs.qq.com/tool/getpoint/index.html高德地图坐标拾取器:https://lbs.amap.com/console/show/picker谷歌地图坐标拾取器:https://www.google.com/maps/place/LAT,LNG等等……

不过老编可以保证,他们家目前的版本都没有老编家的好用,至少在手机端自适应上用起来不方便,也没导航、收藏、转发等功能,甚至还带Bug~

而LBS-SIR家祖传的纯手工打造源码,运行起来有如丝一般顺滑,你,值得拥有!

1

别人家有的坐标查询功能,我们也有


拖拽地图,移动“十”字准星对准要查询的目标地点即可,页面底部文本框中,会动态显示出该点的经纬度坐标,如下图:


2

别人家不一定有的坐标查询功能,我们家有


当你拿到一个经纬度坐标,可在地图底部的输入框中填入,然后点击“►”就能直接跳转到该地点:


如上:39.904882,116.427123,可查得是“北京站”的经纬度坐标。

3

别人家没有的一键唤起导航功能,我们家有


点击坐标中心(十字准星),可一键盘唤起导航功能:


换个地方吧~举个栗子说这次获得的坐标地是江宁公安分局,点击开始导航。



已经自动为您唤起手机地图APP进行导航路线规划了,省去您费脑力记忆地名,再去打开导航软件重复输入的步骤。



接下来您驾车听着语音就是了。


4

别人家没有的地点收藏功能,我们家有



让您快速添加重要地点“微信收藏夹”中,告别重要地点四处随手记,要用找不到的烦恼!


收藏的地点,还可直接通过微信分享给好友,不用管对方装的是哪家的地图APP,微信APP肯定通用:


不光如此,如果是用安卓手机的同学,还可以给地点添加点“备注”“标签”,便于您门别类管理:


附:源码部分

<!DOCTYPE html><html><meta charset="utf8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css"><link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css"><script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script><script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script><script src='https://map.qq.com/api/js?v=2.exp&key=YOUR_QQMAP_KEY'></script><title>经纬度坐标拾取器</title>
<style>
html, body { margin:0 auto; }
#cross { position: fixed; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; z-index: 2; font-family: arial; text-align: center; font-size: 2.8rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#latLon { position: fixed; bottom: 0px; width: 100%; height: 3rem; line-height: 3rem; color: #FFFFFF; text-align: center; background: #427FDB; }
input { width: 4rem; height: 1rem; line-height: 1rem; text-align: center; font-size: 0.7rem; margin: 0.05rem 0 0.05rem; }
font.button { font-family: arial; font-size: 1rem; cursor: pointer; }</style>
<script>
$(document).ready(function() {
var x = $(window).width(); var y = $(window).height(); $("#map").css({"width": x + "px", "height": y + "px"}); $("#cross").css({"top": (y - $("#cross").height()) / 2 + "px", "left": (x - $("#cross").width()) / 2 + "px"});
// 初始坐标 var lat= 39.904619; var lon = 116.397683;
$("#lat").val(lat); $("#lon").val(lon);
center = new qq.maps.LatLng(lat, lon); map = new qq.maps.Map (document.getElementById('map'), { center: center, draggable: true, scrollwheel: true, disableDoubleClickZoom: true, zoomControl: true, zoomControlOptions: { position: qq.maps.ControlPosition.LEFT_TOP //设置地图控件位置靠近左上侧 }, zoom: 14 });
qq.maps.event.addListener(map, 'center_changed', function() { newCenterLat = map.getCenter().lat; newCenterLon = map.getCenter().lng;
// 经度循环问题修正 newCenterLon = ((newCenterLon - -180) % 360 + 360) % 360 + -180; newCenterLon === -180 ? 180 : newCenterLon;
$("#lat").val(newCenterLat.toFixed(6)); $("#lon").val(newCenterLon.toFixed(6)); });
});
function setNewCenter() {
var lat = $("#lat").val(); var lon = $("#lon").val();
// 检验纬度 var latReg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,15}|90\.0{0,6}|[0-8]?\d{1}|90)$/; if (!latReg.test(lat)) { $.alert('不合法的纬度格式…'); return 0; }
// 检验经度 var lonReg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/; if (!lonReg.test(lon)) { alert('经度参数错误!'); return 0; }
map.panTo(new qq.maps.LatLng(lat, lon)); paste("http://www.lbs-sir.com/demo/location.php?"+lat+","+lon); }
// 构造带经纬度信息的URL内容到用户的粘贴板 function paste(content) { // 复制到粘贴板 aux = document.createElement("input"); aux.setAttribute("value", content); document.body.appendChild(aux); aux.select(); document.execCommand("copy"); document.body.removeChild(aux); }
// 询问用户是否启用导航 function nav() { $.confirm("是否要导航到该处?", "提示", function() { // 导航 window.location.href = "http://www.lbs-sir.com/demo/nav.php?"+$("#lat").val()+","+$("#lon").val(); }); }</script></head><body><div id="map"></div><div id="cross" onClick="nav();" title="导航到该处">+</div><div id="latLon"> 纬度:<input type="text" id="lat"> 经度:<input type="text" id="lon"> &nbsp; <font class="button" onClick="setNewCenter();">►</a></div></body></html>

以上源码是经纬度拾取和定位部分。

唤起导航功能的源码留着下一次再介绍。

调用微信开发的JS API库,核心几行就足够了。这算入门级小应用,希望大咖不要嘲笑哈。

---------- 简陋的分隔线 ----------

最后强调一点,本工具不往上涉及如何得到经纬度坐标的环节,是由于这个过程会有“你又泄密了”的嫌疑,所以老编我暂时不再说了。我也不理解为啥别的网站和公众号可以公开说,本号就不能说,总之,希望大家谅解。


有动手能力的朋友,在自行合法取得位置坐标之后,可快速接入您的其它应用中,欢迎大家提出新思路,交流探讨。


另外,如果有之前收藏以下本号发布过的“请删除”系列中文章的同学,望不要传播并删除。谢谢大家!


说明:
  • 工具和源码任何人可无偿使用,复制,修改,传播;

  • 如果不幸违反了您当地的法律法规,请自觉停止使用;




广告:仆力思警营纪念品商城

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存