其他
清仓送啦,经纬度拾取器(含源码)公开自取:并支持一键导航、微信收藏、转发
广告:仆力思警营纪念品商城
1
别人家有的坐标查询功能,我们也有
2
别人家不一定有的坐标查询功能,我们家有
3
别人家没有的一键唤起导航功能,我们家有
已经自动为您唤起手机地图APP进行导航路线规划了,省去您费脑力记忆地名,再去打开导航软件重复输入的步骤。
接下来您驾车听着语音就是了。
4
别人家没有的地点收藏功能,我们家有
<!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">
<font class="button" onClick="setNewCenter();">►</a>
</div>
</body>
</html>
最后强调一点,本工具不往上涉及如何得到经纬度坐标的环节,是由于这个过程会有“你又泄密了”的嫌疑,所以老编我暂时不再说了。我也不理解为啥别的网站和公众号可以公开说,本号就不能说,总之,希望大家谅解。
有动手能力的朋友,在自行合法取得位置坐标之后,可快速接入您的其它应用中,欢迎大家提出新思路,交流探讨。
另外,如果有之前收藏以下本号发布过的“请删除”系列中文章的同学,望不要传播并删除。谢谢大家!
工具和源码任何人可无偿使用,复制,修改,传播;
如果不幸违反了您当地的法律法规,请自觉停止使用;
广告:仆力思警营纪念品商城