<!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. python day- 6 is 和 ==的区别 encode 和 decode

    1.is 和  == 的区别. == 是由来判断左右两边的内容是否相等. is 是用来判断内存地址是否相同. 引进 id (   )函数 小数据池: 对于字符串 ,数字 ,bool 值进行 id()计 ...

  2. 将线上服务器生成的日志信息实时导入kafka，采用agent和collector分层传输，app的数据通过thrift传给agent，agent通过avro sink将数据发给collector，collector将数据汇集后，发送给kafka

    记flume部署过程中遇到的问题以及解决方法(持续更新) - CSDN博客 https://blog.csdn.net/lijinqi1987/article/details/77449889 现将调 ...

  3. LWIP在STM32上的移植

    本文做记录摘抄,加上自己的体会: 文章标题:STM32使用LWIP实现DHCP客户端 http://www.cnblogs.com/dengxiaojun/p/4379545.html 该文章介绍了几 ...

  4. tomcat 部署项目的多种方式

    项目放在tomcat webapps也不会加载两次 下面可以指定项目名称及path   加载war   部署war包  后面不用加war的后缀 <Host appBase="D:/pr ...

  5. vue弹窗插件实战

    vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗 popup.vue <template> <div class="popup-wrapper" ...

  6. 常见的页面效果，相关的js代码

    1.焦点图 $(document).ready(function(){ var i=0; var autoChange= setInterval(function(){ if(i<$(" ...

  7. 跨平台实现zip压缩加密功能

    使用zlib将文件夹压缩成zip文件时,需要自己读取文件然后写入zip文件.利用官方下载的zlib包中包含的contrib/minizip/zip.h和zip.c代码提供的函数,可以很容易实现这个功能 ...

  8. SPOJ_705_New Distinct Substrings_后缀数组

    SPOJ_705_New Distinct Substrings_后缀数组 题意: 给定一个字符串,求该字符串含有的本质不同的子串数量. 后缀数组的一个小应用. 考虑每个后缀的贡献,如果不要求本质不同 ...

  9. MYSQL数据库学习----索引和触发器

    一:索引 索引是创建在数据库表上,其作用是提高对表中数据的查询速度. 假设数据库中有一张1000条记录的表格,如果没有创建索引的话,用户想通过查询条件查询,实际上是把整个数据库中1000条记录都读取一 ...

  10. PostgreSQL 图形化客户端工具的使用技巧你都get了吗？

    PostgreSQL 数据库作为目前功能较强大的开源数据库,得到了广泛应用.其中,TSA就用到了这款数据库来存储处理后的一些业务数据.虽然PostgreSQL自身提供了命令行交互式客户端工具psql, ...