经纬度坐标转换成px_清仓送啦，经纬度拾取器(含源码)公开自取：并支持一键导航、微信收藏、转发...

最新推荐文章于 2021-06-06 18:13:12 发布
最新推荐文章于 2021-06-06 18:13:12 发布
阅读量482 收藏
点赞数
文章标签： 经纬度坐标转换成px
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_28693683/article/details/112336657
版权

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

89868909500919b971536b2768e54c20.png 清仓啦，老编把一些可公开、简易常用的小工具，连同源码贴出来，有需要同学的自行拿去用。今天是第一波： 经纬度拾取器 + 一键发起导航 + 地点微信收藏。小工具可单独使用，点击“阅读原文”链接直达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

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

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

2

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

当你拿到一个经纬度坐标，可在 地图底部的输入框中填入，然后点击“►”就能直接跳转到该地点： dbacd2f0e3a7935cd8bbba51421fa759.gif如上：39.904882,116.427123，可查得是“北京站”的经纬度坐标。

3

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

点击坐标中心(十字准星)，可一键盘唤起导航功能： 4f50fa85df43f91023519f6b4119207e.png换个地方吧~举个栗子说这次获得的坐标地是江宁公安分局，点击开始导航。 664abb896ee27e761a6d3c3e7e7483d8.png

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

6c259ae8782027bc78326d1010afdbf5.png

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

4

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

6aca7a659152a7a1a51d27f5990b4071.png让您快速添加 重要地点到 “微信收藏夹”中，告别重要地点四处随手记，要用找不到的烦恼！ 3bea9dc93e8b3973e875b19a66d384d5.png收藏的地点，还可直接通过 微信分享给好友，不用管对方装的是 哪家的地图APP，微信APP肯定通用： 8df57cee13ef9394d40e0ba149247680.png不光如此，如果是用安卓手机的同学，还可以给地点添加点 “备注”和 “标签”，便于您门别类管理： 0c4facddd717b5d1dc0a5965f74d97e6.png 附：源码部分 
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">      <font class="button" onClick="setNewCenter();">►a>div>body>html>
以上源码是经纬度拾取和定位部分。 唤起导航功能的源码留着下一次再介绍。 调用微信开发的JS API库，核心几行就足够了。这算入门级小应用，希望大咖不要嘲笑哈。 ---------- 简陋的分隔线 ----------

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

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

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

说明：

  • 工具和源码任何人可无偿使用，复制，修改，传播；

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

55428a66013acac95ece4c759cdddae0.gif

  • 请删除

广告：仆力思警营纪念品商城 60e57e0cea97a5be675ce1c74da810a7.png
孤灯苦狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
腾讯地图的最新坐标拾取器源码，适合网站后台和手机站获取坐标点
10-31
基于腾讯地图的最新坐标拾取器API文件，简单，可以模糊查询地点，可以点击地图拾取坐标，可以很方便的嵌入的自己的项目中，总值绝对值得下载！如果程序无法使用，则需要换一个key，，以后可能用作其他用途，程序中key使用的形式：{$qq_map_key}已在thinkphp框架中定义变量读取，你下载后，可以自己申请可以 替换掉变量有多处，都需要替换。
高德地图坐标拾取器
02-05
高德地图坐标拾取器，可以批量生成点击地图产生的经纬度坐标。
lng_lat_pick_up:基于高德地图的经纬度拾取工具
04-27
经纬度获取工具 介绍 使用高德地图制作，用于获取某个点的经纬度或者某个区域的经纬度 使用说明 在获取Web端(JS API)和Web服务两个key，前者用于地图渲染等，后者用于根据关键字查询经纬度 将public/index.html的your_key替换为Web端key 将src/index.js的your_key替换为Web服务key。 运行项目 yarn yarn start 注：编辑区域时，多边形会显示可编辑点。其中不透明点为实际结点，鼠标左键单击该类节点可进行删除操作；半透明点为虚拟节点，单击该类节点将为多边形新增结点；实际结点和虚拟节点均可进行拖动操作，以改变多边形的形状。
百度地图经纬度获取工具
12-19
通过百度地图接口自己写的一个百度地图经纬度获取工具,本工具是一个html页面
基于mapbox-gl 开发类似于高德地图的经纬度拾取器
aganliang的专栏
06-06 853
1.index.html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>坐标拾取器</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> &
PX4 Pro Drone Autopilot_Firmware-master.zip_drone_pixhawk源码_px4_
07-14
PX4 Pro Drone Autopilot是开源的飞行控制系统，主要用于无人机和其他自主飞行器。这个压缩包包含的是其Firmware-master分支的源代码，是PX4软件的核心部分，它负责处理无人机的飞行控制、导航以及传感器数据融合等...
GA自编_px.xixuetong.com_xueshengxuankexitong_源码
10-04
标题 "GA自编_px.xixuetong.com_xueshengxuankexitong_源码" 暗示这是一个基于遗传算法（Genetic Algorithm, GA）的项目，可能用于学生选课系统的优化或模拟。从描述 "xu sheng xue xi tong tong tong" 可以推测，该...
微信小程序在地图选择地址并返回经纬度简单示例
12-11
在微信小程序开发中，地图功能是一项常用且重要的特性，它允许用户在应用内选择地理位置，并获取该位置的详细地址及经纬度信息。本实例将详细解释如何实现这一功能。 首先，微信小程序提供了`wx.chooseLocation`...
PX4bootloader.rar_PIXHAWK bootloader_pixhawk_px4 bootload_px4 bo
07-14
标题中的“PX4bootloader.rar_PIXHAWK bootloader_pixhawk_px4 bootload_px4 bo”指的是一款针对Pixhawk飞行控制器的bootloader程序，而Pixhawk是无人机和机器人系统广泛使用的开源硬件平台。Bootloader是系统启动时...
movecss效果_微信小程序模板js代码前台前端H5页面源码.rar
最新发布
08-09
在微信小程序开发中，"movecss效果"通常指的是利用CSS3的动画技术来实现元素的动态移动效果。这种效果能够增强用户体验，使页面更具交互性和吸引力。本压缩包中的资源包含了一个微信小程序模板，该模板使用...
坐标转换源代码 非常好用
05-27
GPS测量直接提供的坐标（B,L,H）是1984年世界大地坐标系(Word Geodetic System 1984即WGS-84)的坐标，其中B为纬度，L为经度，H为大地高。而在实际应用中，我国采用的是1954北京坐标系或者1980西安坐标系下的高斯投影坐标（x ,y）。如何实现WGS-84坐标系与北京54坐标系或者1980西安坐标系的转换，一直是GPS应用中关心的热点。
坐标转换软件Coord最新完整版(含说明书)
10-22
坐标转换问题的详细了解对于测量很重要，那么请和我一起来讨论这个问题。 首先，我们要弄清楚几种坐标表示方法。大致有三种坐标表示方法：经纬度和高程，空间直角坐标，平面坐标和高程。 我们通常说的WGS-84坐标是经纬度和高程这一种，北京54坐标是平面坐标和高程着一种。 现在，再搞清楚转换的严密性问题，在同一个椭球里的转换都是严密的，而在不同的椭球之间的转换是不严密的。举个例子，在WGS-84坐标和北京54坐标之间是不存在一套转换参数可以全国通用的，在每个地方会不一样，因为它们是两个不同的椭球基准。 那么，两个椭球间的坐标转换应该是怎样的呢？一般而言比较严密的是用七参数法（包括布尔莎模型，一步法模型，海尔曼特等），即X平移，Y平移，Z平移，X旋转，Y旋转，Z旋转，尺度变化K。要求得七参数就需要在一个地区需要3个以上的已知点，如果区域范围不大，最远点间的距离不大于30Km(经验值)，这可以用三参数（莫洛登斯基模型），即X平移，Y平移，Z平移，而将X旋转，Y旋转，Z旋转，尺度变化K视为0，所以三参数只是七参数的一种特例。在本软件中提供了计算三参数、七参数的功能。 在一个椭球的不同坐标系中转换可能会用到平面转换，现阶段一般分为四参数和平面网格
常用坐标系转换工具源代码包
02-28
常用坐标系转换工具源代码包
CoorTrans坐标转换程序
04-15
坐标转换程序，投影正反算，布尔沙七参数计算，七参数坐标转换，投影换带，大地坐标系、投影坐标系、空间直角坐标系的任意互转。
经纬度坐标转换成px_墨卡托坐标与经纬度转换
weixin_39613385的博客
12-21 419
zoom为地图层级，最小zoom=0，此时瓦片总数量为1X轴或Y轴的瓦片数量=2^zoom瓦片总数量=2^zoom*2^zoom每个瓦片像素为256*256如：当zoom=2时，X轴Y轴的瓦片数量都为2^zoom=4，瓦片总数量=2^zoom*2^zoom=16，XY轴的像素长度=4*256=1024/** 当zoom=2时* X轴或Y轴的瓦片数量=2^zoom=4* 每个瓦片的像素为256*25...
腾讯地图拾取坐标html,腾讯地图Api 实现拾取坐标功能示例
weixin_34193979的博客
06-01 783
一、注册Api账号，引用js库二、编写坐标拾取js代码和html代码//按钮定义*坐标：经度纬度点击坐标拾取//弹出框定义×拖动位置标记设置坐标确定js代码示例//选择坐标处理var map;var marker;var init = function () {var center = new qq.maps.LatLng(39.916527, 116.397128);map = new qq.m...
php短视频源码百度地图坐标拾取系统自定义页面
云豹网络科技
07-23 267
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body
地址到经纬度批量转换代码
10-15
代码总体说明： 1
chrome控制台如何把vw显示成px_flutter项目：如何进行web平台和移动端平台快速切换的技巧方法...
06-01
对于第一个问题，你可以在 Chrome 控制台中使用以下命令将 vw 转换为 px： ```javascript // 将 1vw 转换为 px 单位 const vwToPx = (vw) => { return vw * document.documentElement.clientWidth / 100; } ``` 然后，在控制台中使用 `vwToPx(1)` 命令将 1vw 转换为 px 单位。你也可以在控制台中使用 `$('selector').css('property', 'value')` 命令，将 CSS 属性值从 vw 转换为 px 单位。 对于第二个问题，Flutter 可以使用响应式布局来方便地实现 Web 和移动端的快速切换。在 Flutter 中，你可以使用 MediaQuery.of(context).size 属性来获取当前设备的屏幕大小，然后根据不同的屏幕大小来自适应地设置布局。 例如，你可以使用 LayoutBuilder 组件来根据不同的屏幕宽度设置不同的列数： ```dart LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth > 600) { return GridView.count( crossAxisCount: 3, // ... ); } else { return GridView.count( crossAxisCount: 2, // ... ); } }, ); ``` 这样，当屏幕宽度大于 600 时，将显示一个 3 列的网格视图，否则将显示一个 2 列的网格视图。你也可以使用 MediaQuery.of(context).orientation 属性来检测设备的方向，然后根据方向来设置不同的布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值