网页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;  }




原创粉丝点击