利用HTML5定位功能,实现在百度地图上定位

代码如下:

HTML5定位

*{ margin: 0px; padding: 0px;}

body{text-align: center;  height: 100%;overflow:hidden;}

#allmap{ width: 100%;height: 100%; position: absolute;}

$(function(){

if(supportsGeoLocation()){

alert("你的浏览器支持 GeoLocation.");

}else{

alert("不支持 GeoLocation.")

}

// 检测浏览器是否支持HTML5

function supportsGeoLocation(){

return !!navigator.geolocation;

}

// 单次位置请求执行的函数

function getLocation(){

navigator.geolocation.getCurrentPosition(mapIt,locationError);

}

//定位成功时,执行的函数

function mapIt(position){

var lon = position.coords.longitude;

var lat = position.coords.latitude;

// alert("您位置的经度是:"+lon+" 纬度是:"+lat);

var map = new BMap.Map("allmap");

var point = new BMap.Point(""+lon+"",""+lat+"");

map.centerAndZoom(point,19);

var gc = new BMap.Geocoder();

translateCallback = function (point){

var marker = new BMap.Marker(point);

map.addOverlay(marker);

map.setCenter(point);

gc.getLocation(point, function(rs){

var addComp = rs.addressComponents;

if(addComp.province!==addComp.city){

var sContent =

"

你当前的位置是:

" +

"

"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"

" +

"

";}

else{

var sContent =

"

你当前的位置是:

" +

"

"+ addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"

" +

"

";

}

var infoWindow = new BMap.InfoWindow(sContent);

map.openInfoWindow(infoWindow,point);

});

}

BMap.Convertor.translate(point,0,translateCallback);

}

// 定位失败时,执行的函数

function locationError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

alert("User denied the request for Geolocation.");

break;

case error.POSITION_UNAVAILABLE:

alert("Location information is unavailable.");

break;

case error.TIMEOUT:

alert("The request to get user location timed out.");

break;

case error.UNKNOWN_ERROR:

alert("An unknown error occurred.");

break;

}

}

// 页面加载时执行getLocation函数

window.onload = getLocation;

})

测试浏览器:ie11定位成功率100%,Safari定位成功率97%。其它浏览器暂时不行,HTML5获取不了地理位置信息。

html地图定位系统原理代码,利用HTML5定位功能实现在百度地图上定位相关推荐

  1. android百度地图sdk定位权限,Android:使用百度地图SDK实现定位:下载SDK、申请密钥、动态获得Android权限...

    最近想实现一个打卡的功能,想到可以利用百度地图的SDK.网上有很多关于百度地图SDK定位.地图功能应用的demo,这部分倒不是很困难.但网上很多博客写的内容一般都着重于代码部分,很多下载配置和编译器设 ...

  2. Android如何实现地图定位?Android studio+百度地图API+Android6.0系统实现地图显示、地址设置、点击地图定位功能(详细)

    文章说明:本文初衷是为了记录毕设学习过程,避免忘记操作流程.该功能是毕业设计的Android软件端的功能之一,本文将从获取百度地图密钥(AK)开始,详细地对地图定位配置和相关代码进行说明,文末将附上实 ...

  3. html打飞机游戏代码,利用HTML5 Canvas实现打飞机游戏

    这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下 之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和 ...

  4. HTML画布太阳代码,利用HTML5实现Canvas水面下太阳特效

    特效描述:利用HTML5实现 Canvas 水面下 太阳特效.利用HTML5实现Canvas水面下太阳特效 代码结构 1. 引入JS 2. HTML代码 void main() { gl_Positi ...

  5. HTML5--地理定位与第三方工具百度地图的应用

    前言: 看到了很多技术大牛和相关博客,很少关于HTML5的地理定位的描述,不知道他们是不愿意提及还是使用的少的原因,我个人按一点点经验总结了两方面原因: 第一.服务商方面的原因,因为HTML5的定位是 ...

  6. html百度地图导航起点默认定位位置,关于javascript:百度地图定位和导航

    页面初始化时,加载百度地图JS,加载实现后执行回调函数开始定位,定位胜利后初始化地图对象,计算导航路线,而后展现. 反对IP定位须要在页面 标签引入的JS: vue单文件组件: mounted () ...

  7. H5获取地图定位并标记(百度地图)

    <!-- HTML5文件 --> <!DOCTYPE html> <html> <head>     <meta charset="ut ...

  8. android百度地图定位跳转中心点,百度地图,拖动地图,定位marker固定在屏幕中心位置...

    以下为百度地图相关效果图: 注:该例子主要思路是将覆盖物(marker)通过css定位上去的,但是存在一个问题,当浏览器窗口宽度改变时,覆盖物会自动定位到地图中心位置,但是地图可能不会. map ht ...

  9. android自定义百度地图导航,Android百度定位导航之基于百度地图移动获取位置和自动定位...

    一.问题描述 使用百度地图实现如图所示应用,首先自动定位当前我起始位置(小圆点位置),并跟随移动不断自动定位我的当前位置 百度Api不同版本使用会有些差异,本例中加入lib如下: 二.编写MyAppl ...

最新文章

  1. android使用webview时按后退退出的问题
  2. Build a react project step by step
  3. 2015中学计算机考试题,2017年初中信息技术考试试题及答案
  4. 今奥无人机举证_【企业动态】今奥小飞无人机助力安徽省省级占补平衡核查与验收...
  5. centos6.4下安装python3.6以及对应的django1.11
  6. c 汇编语言用标准函数代替,C与汇编的接口技术
  7. 亚马逊独霸美国安云计算未来十年订单;英伟达推出首个元宇宙平台;华为云、天翼云会合并吗?...
  8. gatsby_使用TinaCMS + Gatsby编辑Markdown的3种方法
  9. c语言简单的动画程序代码,发个C代码(简单动画演示)
  10. 最强人工智能 OpenAI 极简教程
  11. PLSQL Developer 12 破解注册码
  12. Linux 计算器程序
  13. 百度富文本编辑器 设置图片的显示大小
  14. php给页面加背景图片,html怎么添加背景图片且让图片平铺整个页面?(代码示例)...
  15. 初创期企业运营必备手册-工具包-绩效考核方法工具包
  16. 关于“软件设计师”考试的感悟分享
  17. 需要密码才能打开的word文件
  18. 呼叫中心座席人员如何把控时间
  19. 使用二维数组表示N阶矩阵
  20. C# FileStream类:文件读写

热门文章

  1. 对待元宇宙:罗永浩的积极与刘慈欣的悲观
  2. 搜索rapidshare资源的几种方法
  3. UIPageControl自定义图片替换圆点
  4. chrome硬解码265的方案
  5. 详细的SQL保留小数点和遇到的坑(四舍五入/非四舍五入)
  6. 软考(软件设计师知识点) --多媒体基础
  7. C# 操作XML文件 XmlDocument和XElement
  8. c语言 头文件卫士详解,C/C++中的“头文件卫士”
  9. SpringMVC源码分析_1 SpringMVC容器启动和加载原理
  10. vue3中require报错 require is not defined