<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} html,body {
height: 100%;
} #mapDiv {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!--显示地区的div-->
<div id="mapDiv">
</div> <script src="http://api.map.baidu.com/api?v=2.0&ak=Q6aiD950lCsEWDWblF8T5BzQjxeUylCj"></script>
<script>
/**
* 地理定位
*/
function getLocation() { //判断浏览器是否支持html5地理定位
if (navigator.geolocation) { //定位方法,参数1:定位成功回调函数,参数2:定位失败回调函数,参数3:具体定位设置
navigator.geolocation.getCurrentPosition(showMap,handlerError,{
enableHighAccuracy:true, //是否高精度定位
maximumAge:1000 //每隔多少毫秒重新获得一次位置
}); } else {
alert('当前浏览器不支持html5的地理定位');
} } /**
* 定位成功的回调函数,参数就是坐标对象
*/
function showMap(loc) { var longitude = loc.coords.longitude;//经度
var latitude = loc.coords.latitude;//纬度 alert('定位成功,当前经纬度:' + longitude + ',' + latitude); //写死的经纬度
// var longitude = 121.51155629576095;
// var latitude = 38.86043635958201; //调用百度地图的API
var map = new BMap.Map('mapDiv'); //创建地图对象
var point = new BMap.Point(longitude,latitude);//坐标点对象 var convertor = new BMap.Convertor(); //转换坐标类的对象
var pointArr = []; //坐标数组
pointArr.push(point); //加入一个坐标对象(可以加入多个坐标对象)
convertor.translate(pointArr,1,5,translateCallback);//转换坐标 //添加地图类型控件,默认在地图右上方
map.addControl(new BMap.MapTypeControl());
//地图平移缩放控件,PC端默认地图左上方,移动端提供缩放控件,默认在地图右下方
map.addControl(new BMap.NavigationControl());
//比例尺控件,默认在地图左下方,显示地图的比例关系
map.addControl(new BMap.ScaleControl());
//缩略地图控件,默认在地图右下方,是一个可折叠的缩略地图
map.addControl(new BMap.OverviewMapControl());
//定位控件,针对于移动端,默认在地图左下方
map.addControl(new BMap.GeolocationControl());
//开启滚轮缩放
map.enableScrollWheelZoom(true); //转换完毕的回调函数,data就是转换后的数据
function translateCallback(data) { if (data.status == 0) { //0为转换成功
var marker = new BMap.Marker(data.points[0]); //创建标记点
map.addOverlay(marker);//在地图上添加标记点
var label = new BMap.Label('纠正之后的GPS坐标',{offset:new BMap.Size(20,-20)}); //创建文字标签
marker.setLabel(label); //添加标记的文字标签
map.centerAndZoom(data.points[0],15) ;//设置坐标中心点和缩放级别
} }
} /**
* 定位失败的回调函数,参数就是错误码对象
*/
function handlerError(err) { if (err.code == 1) {
alert('位置服务被拒绝,请开启');
} else if (err.code == 2) {
alert('无法获得用户位置');
} else if (err.code == 3) {
alert('获取信息超时');
} else if (err.code == 4) {
alert('未知错误无法定位');
}
} //调用定位
getLocation();
</script>
</body>
</html>

  

h5-25-地理定位配合百度地图的更多相关文章

  1. HTML5地理定位,百度地图API,知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  2. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  3. html5 geolocation配合百度地图api实现定位

    1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用时 ...

  4. 手机端GPS定位结合百度地图实现定位

    html页面: <!DOCTYPE html>  <html>  <head>      <meta http-equiv="Content-Typ ...

  5. 【Android】3.25 示例25--调启百度地图

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 调启百度地图是指:利用SDK接口,可直接在本地打开百度地图客户端或WebApp实现地图功能. 目前支 ...

  6. 微信小程序城市定位(借助百度地图API判断城市)

    概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...

  7. 如何利用【百度地图API】进行定位?非GPS定位

    原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...

  8. 百度地图sdk定位和遇到的坑

    封装定位服务类: import android.content.Context; import com.baidu.location.BDAbstractLocationListener; impor ...

  9. Android使用百度地图定位并显示手机位置后使用前置摄像头“偷拍”

    今天老板让我验证一下技术可行性,记录下来. 需求 :定位手机的位置并在百度地图上显示,得到位置后使用前置摄像头进行抓拍 拿到这个需求后,对于摄像头的使用不太熟悉,于是我先做了定位手机并在百度地图上显示 ...

随机推荐

  1. Vue 之 npm 及 安装的包

    1  npm相关 1.1 npm 是 基于Node.js 的,所以要先安装Node.js 在浏览器地址栏输入https://nodejs.org/en/, 进入Node.js官网后,点击下载左边的稳定 ...

  2. armel、armhf和arm64

    1 这些名词是什么的缩写 1.1 armel 是arm eabi little endian的缩写.eabi是软浮点二进制接口,这里的e是embeded,是对于嵌入式设备而言. 1.2 armhf 是 ...

  3. [RK3288][Android6.0] 调试笔记 --- 系统识别不同硬件版本方法【转】

    本文转载自:http://m.blog.csdn.net/kris_fei/article/details/70226451 Platform: RockchipOS: Android 6.0Kern ...

  4. iOS自定义提示弹出框(类似UIAlertView)

    菜鸟一枚,大神勿喷.自己在牛刀小试的时候,发现系统的UIAlertView有点不喜欢,然后就自己自定义了一个UIAlertView,基本上实现了系统的UIAlertView,可以根据项目的需求修改UI ...

  5. DBA之RMAN备份

    13:00 backup database   backup db :3h 3h: 产生了10 archive log file   16:00 finish restore database; 13 ...

  6. Intel® Media SDK Media Samples Linux 学习笔记(转)

    最近折腾intel media sdk,主要硬件平台是在HD4600的核显上进行测试,intel media sdk是intel提供的一种基于核显的硬件编解码的解决方案,之前已经有使用ffmpeg进行 ...

  7. 如何快糙好猛的使用Shiqi.Yu老师的公开人脸检测库(附源码)

    前言 本次编写所用的库为于仕祺老师免费提供的人脸检测库.真心好用,识别率和识别速度完全不是Opencv自带的程序能够比拟的.将其配合Opencv的EigenFace算法,基本上可以形成一个小型的毕业设 ...

  8. 机器学习 Hidden Markov Models 3

    Viterbi Algorithm 前面我们提到过,HMM的第二类问题是利用HMM模型和可观察序列寻找最有可能生成该观察序列的隐藏变量的序列.简单来说,第一类问题是通过模型计算生成观察序列的概率,而第 ...

  9. [Selenium] The commonly used operation of element

    btnLogin.click();     //Click element SeleniumUtil.jsClick(driver, saveButtonEl);     //If click()  ...

  10. 礼物gift(DP)

    这道题的DP非常的有意思…… 一开始我们总是会以为这是一个背包问题,直接dp[0] = 0,dp[j] += dp[j-c[i]]进行转移.之后统计一下从dp[m-minn]~dp[m]的答案之和为结 ...