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>

PC端浏览器定位（纯前端）相关推荐

html浏览器pc端禁止缩放,阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码众所周知:移动端页面禁止用户缩放界面只需加上即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮浏 ...
CSS 利用@media screen判断识别手机/PC端浏览器
一.写此篇的初衷: 手机用户常可以更换自己手机系统的字体,那么在浏览网页的时候,网页内容字体也都随之变了,于是我想,能不能让自己的网站的字体在手机浏览器中保持不变(使用一款自定义字体)呢:而在PC端浏 ...
如何实现自定义倍速播放PC端浏览器中的视频
如何实现自定义倍速播放PC端浏览器中的视频随机打开一个有视频的浏览器按键[F12]弹出窗口点击console或控制台在红框处输入代码 document.querySelector(" ...
判断当前入口是PC端企业微信还是PC端浏览器。或者是APP端企业微信
function isQyweixin(){//判断当前入口是PC端还是APP端let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone| ...
cocos creator屏幕适配fitHeight / fitWidth，手机端竖屏，pc端浏览器适配，pc分辨率全屏适配，血条跟随的适配
一,使用creator3.3.2 分别实现手机端和浏览器的适配效果如下打包web-mobile(居然会有这种需求 /流汗!) pc浏览器显示手机端显示 1.首先在项目中设置分辨率和默认适配这里 ...
【第十六篇】理想视口pc端浏览器移动端浏览器元素单位
VScode关键点类型快捷方式关键字举例理想视口 viewport 理想视口 width=device-width 网页宽度等于设备的宽度 initial-scale=1.0 是否缩小页面 ...
移动端和pc端浏览器兼容问题及处理
一.关于移动端兼容性目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有终端. ...
服务端判断客户端是移动端浏览器还是PC端浏览器
在开发过程中,有时候业务要求需要对移动端和PC端分别处理,如果是移动端,那么返回页面A,如果是PC端,那么返回页面B,而判断浏览器是移动端还是PC端,我们一般通过user-agent判断,服务端和前端 ...
移动、ipad、PC端浏览器的判断
在适应移动和PC端的.兼容各种浏览器的网站中,有些事件在PC端没问题,在移动端和ipad上就有问题,于是乎,我做先做设备浏览器判断,再做PC端IE浏览器和非IE浏览器判断~~~~~~~~~~~~~~~ ...

PC端浏览器定位（纯前端）

PC端浏览器定位（纯前端）相关推荐

最新文章

热门文章