网页H5获取当前坐标,完整demo
来源:互联网 发布:s7300模拟量编程 编辑:程序博客网 时间:2024/06/06 18:59
先展示效果:
手机运行效果很好,也很准,电脑嘛,有时超时,有时偏出80多公里。
css部分:
#allmap { overflow: hidden;margin:0;z-index: 10;}.savept{position: fixed;left:40%;z-index: 11;}.mapbox{display: none;}
网页js代码:
var getpo = null;var lat=0,lgt=0;var dizhi,point;function showmap(){//不知道百度地图什么样式,css控制位置不好使,只能在地图展示时,把页面隐藏$(".yemian").hide();var h=$(document).height()-100;var w=$(document).width();$("#allmap").css("height",h+"px");//设置地图容器的高度$("#allmap").css("width",w+"px");$("#allmap").show();$(".mapbox").show();myFun(point);}function savePoint(){$("#fw_zb").text($("#addinfo").html());$(".yemian").show();$("#allmap").hide();$(".mapbox").hide();}$(function(){setTimeout(function(){creatmap();},1000);});function creatmap(){if(navigator.geolocation) {// getpo = setInterval(function() {//如果需要实时标注,可反注释此处navigator.geolocation.getCurrentPosition(succ,erro,{enableHighAccuracy:true,timeout:1000*10});//}, 1000); } else{ alert("浏览器不支持定位"); }}function succ(p){lat = p.coords.latitude; lgt = p.coords.longitude; //地址转换,获取来的是gps坐标,如果要在百度地图上展示,要转成百度坐标 var url="{:U('main/dzzh')}"+"&lat="+lat+"&lgt="+lgt; $.ajax({ type:"get", url:url, async:true, dataType:'json', date:{}, success:function(data){ if(data.status=="0"){ lgt=data.result[0].x; lat=data.result[0].y; $("#hdpoint").val(lgt+","+lat); point = new BMap.Point(lgt, lat); //通过ip获取详细地址 var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(rs){var addComp = rs.addressComponents; dizhi = addComp.city + addComp.district + addComp.street + addComp.streetNumber;$("#addinfo").html(dizhi);$("#fw_zb").text(dizhi);}); } else{ alert("错误代码:"+data.status); } }, error:function(a,b,c){ //alert("坐标转换出错了"); } });}function myFun(point) {var map = new BMap.Map("allmap");var top_left_navigation = new BMap.NavigationControl();map.addControl(top_left_navigation);var myIcon = new BMap.Icon("__ROOT__/public/images/td.png", new BMap.Size(50,50));var marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注map.centerAndZoom(point, 18);map.addOverlay(marker);map.enableDragging();//marker.enableDragging();map.addEventListener("dragend", function(e) { //拖动事件 marker.setPosition(map.getCenter());var pt = e.point;var geoc = new BMap.Geocoder(); geoc.getLocation(pt, function(rs){var addComp = rs.addressComponents; dizhi = addComp.city + addComp.district + addComp.street + addComp.streetNumber;$("#addinfo").text(dizhi);});$("#hdpoint").val(pt.lng + ", " + pt.lat);});}function erro(error){ var x=""; switch(error.code) { case error.PERMISSION_DENIED: x="未获取位置权限" break; case error.POSITION_UNAVAILABLE: x="位置信息不可用" break; case error.TIMEOUT: x="获取位置超时" break; case error.UNKNOWN_ERROR: x="获取位置时发生未知错误" break; } alert(x);}
页面html:
<div class="mapbox"><div id="allmap"></div><div style="clear: both;padding-top:10px;"><a class="btn btn-primary savept" onclick="savePoint()">确定坐标</a></div><div id="addinfo" style="text-align: center;width: 100%;position: fixed;left: 0px;bottom: 5px;"></div></div><div class="yemian"></div>
php服务端:
//地址转换function dzzh(){$lat=I("lat");$lgt=I("lgt");$url="http://api.map.baidu.com/geoconv/v1/?coords=$lgt,$lat&from=1&to=5&ak=xeAcwhF4RomLa0pwUantUlUq";$result=$this->httpGet($url);echo ($result);}private function httpGet($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 500); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($curl, CURLOPT_URL, $url); $res = curl_exec($curl); curl_close($curl); return $res; }
阅读全文
0 0
- 网页H5获取当前坐标,完整demo
- H5网页调用原生支付宝支付的完整demo
- H5截取当前网页
- JS获取网页大小和鼠标当前坐标
- 获取当前经纬度坐标
- h5浏览器获取当前所在位置
- 百度地图坐标获取demo
- 获取当前坐标的方法
- 获取当前鼠标的坐标
- 获取当前触摸点坐标
- jq获取当前鼠标坐标
- JavaScript获取完整当前域名
- js获取网页文档坐标
- HTML5网页页面坐标获取
- 获取当前网页地址,获取当前网页传参
- 获取HTML控件当前的真实坐标。
- MFC获取当前光标坐标(VS2008)
- javascript中获取当前鼠标的坐标
- POJ 2406 kmp + 循环节
- 使用python通过聚币API获取价格数据
- python实现给定一个列表计数指定数字出现的所有次数
- Unity用kinect的手势触发UI区域进行选择操作
- java使用AES加密解密 AES-128-ECB加密
- 网页H5获取当前坐标,完整demo
- RingerMode 设置和勿扰模式关系
- Jquery面试题
- 用 Kotlin 开启我们的 Activity
- Precision,Recall,F1score,Accuracy的理解
- HDU
- 复习题
- 【转载两篇关于android按键事件传递的文章,流程非常完整】Android按键事件传递流程(一)
- HTML5地理定位