html地图定位系统原理代码,利用HTML5定位功能实现在百度地图上定位
利用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定位功能实现在百度地图上定位相关推荐
- android百度地图sdk定位权限,Android:使用百度地图SDK实现定位:下载SDK、申请密钥、动态获得Android权限...
最近想实现一个打卡的功能,想到可以利用百度地图的SDK.网上有很多关于百度地图SDK定位.地图功能应用的demo,这部分倒不是很困难.但网上很多博客写的内容一般都着重于代码部分,很多下载配置和编译器设 ...
- Android如何实现地图定位?Android studio+百度地图API+Android6.0系统实现地图显示、地址设置、点击地图定位功能(详细)
文章说明:本文初衷是为了记录毕设学习过程,避免忘记操作流程.该功能是毕业设计的Android软件端的功能之一,本文将从获取百度地图密钥(AK)开始,详细地对地图定位配置和相关代码进行说明,文末将附上实 ...
- html打飞机游戏代码,利用HTML5 Canvas实现打飞机游戏
这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下 之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和 ...
- HTML画布太阳代码,利用HTML5实现Canvas水面下太阳特效
特效描述:利用HTML5实现 Canvas 水面下 太阳特效.利用HTML5实现Canvas水面下太阳特效 代码结构 1. 引入JS 2. HTML代码 void main() { gl_Positi ...
- HTML5--地理定位与第三方工具百度地图的应用
前言: 看到了很多技术大牛和相关博客,很少关于HTML5的地理定位的描述,不知道他们是不愿意提及还是使用的少的原因,我个人按一点点经验总结了两方面原因: 第一.服务商方面的原因,因为HTML5的定位是 ...
- html百度地图导航起点默认定位位置,关于javascript:百度地图定位和导航
页面初始化时,加载百度地图JS,加载实现后执行回调函数开始定位,定位胜利后初始化地图对象,计算导航路线,而后展现. 反对IP定位须要在页面 标签引入的JS: vue单文件组件: mounted () ...
- H5获取地图定位并标记(百度地图)
<!-- HTML5文件 --> <!DOCTYPE html> <html> <head> <meta charset="ut ...
- android百度地图定位跳转中心点,百度地图,拖动地图,定位marker固定在屏幕中心位置...
以下为百度地图相关效果图: 注:该例子主要思路是将覆盖物(marker)通过css定位上去的,但是存在一个问题,当浏览器窗口宽度改变时,覆盖物会自动定位到地图中心位置,但是地图可能不会. map ht ...
- android自定义百度地图导航,Android百度定位导航之基于百度地图移动获取位置和自动定位...
一.问题描述 使用百度地图实现如图所示应用,首先自动定位当前我起始位置(小圆点位置),并跟随移动不断自动定位我的当前位置 百度Api不同版本使用会有些差异,本例中加入lib如下: 二.编写MyAppl ...
最新文章
- android使用webview时按后退退出的问题
- Build a react project step by step
- 2015中学计算机考试题,2017年初中信息技术考试试题及答案
- 今奥无人机举证_【企业动态】今奥小飞无人机助力安徽省省级占补平衡核查与验收...
- centos6.4下安装python3.6以及对应的django1.11
- c 汇编语言用标准函数代替,C与汇编的接口技术
- 亚马逊独霸美国安云计算未来十年订单;英伟达推出首个元宇宙平台;华为云、天翼云会合并吗?...
- gatsby_使用TinaCMS + Gatsby编辑Markdown的3种方法
- c语言简单的动画程序代码,发个C代码(简单动画演示)
- 最强人工智能 OpenAI 极简教程
- PLSQL Developer 12 破解注册码
- Linux 计算器程序
- 百度富文本编辑器 设置图片的显示大小
- php给页面加背景图片,html怎么添加背景图片且让图片平铺整个页面?(代码示例)...
- 初创期企业运营必备手册-工具包-绩效考核方法工具包
- 关于“软件设计师”考试的感悟分享
- 需要密码才能打开的word文件
- 呼叫中心座席人员如何把控时间
- 使用二维数组表示N阶矩阵
- C# FileStream类:文件读写
热门文章
- 对待元宇宙:罗永浩的积极与刘慈欣的悲观
- 搜索rapidshare资源的几种方法
- UIPageControl自定义图片替换圆点
- chrome硬解码265的方案
- 详细的SQL保留小数点和遇到的坑(四舍五入/非四舍五入)
- 软考(软件设计师知识点) --多媒体基础
- C# 操作XML文件 XmlDocument和XElement
- c语言 头文件卫士详解,C/C++中的“头文件卫士”
- SpringMVC源码分析_1 SpringMVC容器启动和加载原理
- vue3中require报错 require is not defined