第一：

PC端浏览器定位（纯前端）
浏览器定位 ：这里用了两种 ，一种是Html5自带的方法 另一种是引用了百度api  ，百度api 的使用有三种：
1 浏览器定位
2 ip定位
3 SDK辅助定位
引用百度api的前提是需要申请百度ak,这个大家自行百度查询吧  使用百度的话需要连接外网

下面是代码 ：

<!DOCTYPE html>
<html>
<title>测试PC浏览器定位</title>
<body>
    <p id="demo">点击这个按钮，通过H5获得您的坐标：</p>
    <div id="allmap"></div>
    <button onclick="getLocation()">H5测试</button>
 
    <script src="../../js/lib/jquery/jquery.min.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=3.0&ak=你的ak码"></script>
    <script>    
    
        /* H5定位方法 */
        var x = document.getElementById("demo");
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition,
                        showError);
            } else {
                console.log("请求失败")
            }
        }
        function showPosition(position) {
            console.log(position.coords.latitude + "   "
                    + position.coords.longitude)
        }
        function showError(error) {
            console.log("H5错误编码  " + error.code)
 
            switch (error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
            }
        }
        
        /* 百度api 通过浏览器定位 */
        var geolocation1 = new BMap.Geolocation();
        geolocation1.getCurrentPosition(function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                alert('浏览器定位您的位置：' + r.point.lng + ',' + r.point.lat);
            } else {
                alert('浏览器定位 failed 状态  ' + this.getStatus());
            }
        });
 
        
        //百度api 通过ip定位
        function myFun(result) {
            var cityName = result.name;
            alert("IP 定位城市:" + cityName+"   经度"+result.center.lng+"   纬度"+result.center.lat);
        }
         var myCity = new BMap.LocalCity();
        myCity.get(myFun);
        
        
        //百度api SDK辅助定位
        var geolocation = new BMap.Geolocation();
        // 开启SDK辅助定位
        geolocation.enableSDKLocation();
        geolocation.getCurrentPosition(function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                alert('SDK辅助定位 您的位置：' + r.point.lng + ',' + r.point.lat);
            } else {
                alert('SDK辅助failed  状态' + this.getStatus());
            }
        });
    </script>
</body>
</html>

原文 ：
第二：
h5实现浏览器的定位功能 获取经纬度【亲测有效】2018年5月11日 附带百度坐标转换为腾讯坐标 查位置 逆向查

最近写h5用到了定位功能，网上搜索如果使用其他API的话还需要下载sdk，所以就使用的浏览器的，比较简陋。不过定位也还ok，微信自带浏览器偏差了大概500米， UC的大概也就是几米吧，比较精确了。

js代码：
// 获取本机经纬度
getlatandlong=()=> {alert('经度：'+this._position.lat,'维度：'+this._position)}
 
 getLocation=()=>{
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(this.showPosition,this.showError);
  }else{
    alert("浏览器不支持地理定位");
  }
   //调用coords的latitude和longitude即可获取到用户的纬度和经度。
 
};

接下来是两个回调函数 调用成功，和调用失败的函数
showPosition=(position)=>{
  var lat = position.coords.latitude; //纬度
  var lag = position.coords.longitude; //经度
  this._position.lon=lag;
  this._position.lat = lat;
  console.log('纬度:'+lat+',经度:'+lag);
};
// 上面的代码可以知道，如果用户设备支持地理定位，则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。
// 我们先来看函数showError()，它规定获取用户地理位置失败时的一些错误代码处理方式：
showError=(error)=>{
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert("定位失败,用户拒绝请求地理定位");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("定位失败,位置信息是不可用");
      break;
    case error.TIMEOUT:
      alert("定位失败,请求获取用户位置超时");
      break;
    case error.UNKNOWN_ERROR:
      alert("定位失败,定位系统失效");
      break;
  }
};

如果不熟悉es6写法的话，上述的方法名称这样定义：

function(参数){

// 方法内容

}

提供一个查询坐标的地址；http://lbs.amap.com/console/show/picker

我这个只是获取经纬度，如果你还要转换成为对应的地址，自行百度，对接百度API的比较方便。

提供一个地址转换的地址：点击打开链接
下面代码来自于上面大牛提供的：
var map = new BMap.Map("allmap");    // 这个需要在html主题中定义一个id为 allmap 的标签
var longitude, latitude;  
navigator.geolocation.getCurrentPosition(function (position) {  
    longitude = position.coords.longitude;  
    latitude = position.coords.latitude;  
});  
setTimeout(function () {  
    var gpsPoint = new BMap.Point(longitude, latitude);  // 使用百度地图转换的需要转换成百度地图专用的经纬度
    BMap.Convertor.translate(gpsPoint, 0, function (point) {  
        var geoc = new BMap.Geocoder();  
        geoc.getLocation(point, function (rs) {  
            var addComp = rs.addressComponents;  
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);  
        });  
    });  
}, 3000);

===========================================百度地图使用需要密钥,这里提供一个腾讯的api, 引入js之后可以直接使用的二〇一八年十月二十四日 ==============================
腾讯提供的api包括转换百度,高德坐标/将经纬度换成地址...
我试了两个, 比较好用啦

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=convertor"> </script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
  window.onload=function(){
  //调用地址解析类
   geocoder = new qq.maps.Geocoder({
   　　complete: function (result) {
// debugger;
      　　location.href = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + result.detail.location.lat + "," + result.detail.location.lng + ";title:想要显示的坐标名称&referer=myapp";
       }
   });
   geocoder.getLocation("北京市海淀区志新路");
 
 
 
  //console.log()
    //$('.class-btn').attr('name','wenbin'); 百度转腾讯坐标
  //qq.maps.convertor.translate(new qq.maps.LatLng("39.91512","116.403995"), 3, function(res){
  // latlng = res[0];
  // console.log(latlng);
//});
 
  }
}
</script>

在引入的js里面加入这个可以, 不知道能免费试用多长时间,
key=GPHBZ-WBV6I-NFKG7-5BZ3O-WBEDH-WRBXV

原文 https://blog.csdn.net/u013408059/article/details/80278061

PC端浏览器定位的更多相关文章

  1. 在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换

    查看thinkphp版本号方法 打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php,在22--23行可以看到版本信息THINK_VERSION,如下图: 说 ...

  2. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

  3. js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

    众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...

  4. Fiddler4工具配置及调试手机和PC端浏览器

    Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...

  5. 怎么判断PC端浏览器内核

    browser = {             /**              * @property {boolean} ie 检测当前浏览器是否为IE              */       ...

  6. 判断PC端浏览器类型

    if (browserInfo.type !== 'IE' || (browserInfo.type == 'IE' && Number(browserInfo.version) &g ...

  7. [js开源组件开发]js手机端浮层控件，并有多种弹出小提示，兼容pc端浏览器

    js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js di ...

  8. 网页或WEB应用或PC端浏览器调用百度地图API

    今天在写微网页中遇见了调用百度地图这个问题:在一个容器中显示地图信息如图(设计图截图) 然后在网上查了接口:http://api.map.baidu.com/,就是这个东东,当然不止这个,还有几个必选 ...

  9. web前端工程师在移动互联网时代里的地位问题 为啥C/S系统在PC端没有流行起来，却在移动互联网下流行了起来 为啥移动端的浏览器在很多应用里都是靠边站，人们更加倾向于先麻烦自己一下，下载安装个客户端APP

    web前端工程师在移动互联网时代里的地位问题 支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规 ...

随机推荐

  1. HDU3001 Travelling —— 状压DP（三进制）

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3001 Travelling Time Limit: 6000/3000 MS (Java/ ...

  2. shell网络管理

    背景知识 联网就是通过网络将主机进行互联并采用不同的规范配置网络上的节点.我们以 TCP/IP 作为网络栈,所有的操作都是基于它进行的.网络是计算机系统中重要的部分.连接在网络上的每个节点都分配了一个 ...

  3. 洛谷 P1313 计算系数 —— 水题

    题目:https://www.luogu.org/problemnew/show/P1313 不就是...C(k,n) * an * bm . 代码如下: #include<iostream&g ...

  4. word-break word-wrap

    work-break:break-all CJK超出的部分自动换行 word-wrap:break-word CJK如果有分隔符,当前分隔符之后与下一个分隔符之间的内容不能在这一行全部显示的话,在当前 ...

  5. 855E

    数位DP 昨天的B题,excited 又学习了一下数位dp... 数位dp要考虑几个比较重要的东西:1.前导0,2.天际线,3.记忆化的条件,4.细节 经常数位dp会问我们l->r区间中满足某某 ...

  6. bzoj3544

    set+贪心 感觉当div2C挺好的... set维护前缀和%m,当前答案为sum[r]-sum[l-1],我们当然希望sum[l-1]是sum[r]的后继或者最小的数,所以求出来比较一下就行了 #i ...

  7. 浅谈并查集 By cellur925【内含题目食物链、银河英雄传说等】

    什么是并查集? 合并!查询!集合! 专业点说? 动态维护若干不重叠的和,支持合并查询的数据结构!(lyd老师说的) 数据结构特点:代表元.即为每个集合选择一个固定的元素,作为整个集合的代表,利用树形结 ...

  8. nginx静态资源服务器简单配置

    有时候我们可以把服务器的一些文件放在固定目录以便下载,比如image,css,js等.就可以使用nginx转发静态资源. 参考链接:https://blog.csdn.net/name_is_wl/a ...

  9. JAVA启动参数三：非Stable参数

    前面我们提到用-XX作为前缀的参数列表在jvm中可能是不健壮的,SUN也不推荐使用,后续可能会在没有通知的情况下就直接取消了:但是由于这些参数中的确有很多是对我们很有用的,比如我们经常会见到的-XX: ...

  10. Zoj 1610 Count the Colors （线段树+区间更新+暴力计数）

    题目大意: 有n次操作,每次都是对一根线中的一段区间进行染色(颜色并不相同),有时候后面的颜色有可能覆盖前面的颜色,问最后涂完色,能看到的颜色有几种,每种颜色有几部分? 解题思路: 这个题目建树的时候 ...