<!DOCTYPE html>

 <html lang="en">

     <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

     <title>获取地理位置</title>

     <style>

     html,body,#allmap{

     width:100%;

     height:100%;

     }

     </style>

     </head>

     <body>

         <div id="box"></div>

         <div id="allmap"></div>

         <script>

             var map;

             //异步加载地图

             function loadJScript() {

                 var script = document.createElement("script");

                 script.type = "text/javascript";

                 script.src = "http://api.map.baidu.com/api?v=2.0&ak=j9Qhl3n6K2RbPb2EnYr5LW0mEyaacdiC&callback=init";

                 document.body.appendChild(script);

             }

             function init() {

                 var map1 = new BMap.Map("allmap"); // 创建Map实例

                 var point = new BMap.Point(110, 38); // 创建点坐标

                 map1.centerAndZoom(point,15);

                 map1.enableScrollWheelZoom(); //启用滚轮放大缩小

                 map=map1;

             }

             window.onload = loadJScript;

             //异步加载地图

             //获取经纬度

             var x = document.querySelector("#box");

             function getLocation(){

                 if(navigator.geolocation){

                     console.log("123");

                     navigator.geolocation.getCurrentPosition(function(position){

                         console.log(456);

                         x.innerHTML ="纬度："+position.coords.latitude +"<br>经度："+

                         position.coords.longitude;

                         var longitude = position.coords.longitude,latitude = position.coords.latitude;

                         //调用百度地图api：

                         theLocation(map,longitude,latitude)

                     },

                     function (error){

                         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;

                         }

                     },

                     {

                     // 指示浏览器获取高精度的位置，默认为false

                     enableHighAcuracy: true,

                     // 指定获取地理位置的超时时间，默认不限时，单位为毫秒

                     timeout: 5000,

                     // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。

                     maximumAge: 3000

                     }

                     );

                 }else{

                     x.innerHTML="该浏览器不支持获取地理位置！";

                     alert('123');

                 }

             }

             function theLocation(map,longitude,latitude) {

                 if (longitude != "" && latitude != "") {

                     map.clearOverlays();

                     var new_point = new BMap.Point(longitude, latitude);

                     //坐标转换

                     var convertor = new BMap.Convertor();

                     var pointArr = [];

                     pointArr.push(new_point);

                     convertor.translate(pointArr, 1, 5, function(data){

                         if(data.status === 0) {

                         //标注转换后的坐标

                         var marker = new BMap.Marker(data.points[0]);

                         map.addOverlay(marker);

                         var label = new BMap.Label("您现在的位置", {offset: new BMap.Size(20, -10)});

                         marker.setLabel(label); //添加百度label

                         map.setCenter(data.points[0]);

                         map.centerAndZoom(data.points[0],18);

                         }

                     })

                 }

             }

             //获取位置

             getLocation();

         </script>

     </body>

 </html>

H5+百度地图定位的更多相关文章

  1. Android 百度地图定位(手动+自动) 安卓开发教程

    近由于项目需要,研究了下百度地图定位,他们提供的实例基本都是用监听器实现自动定位的.我想实现一种效果:当用户进入UI时,不定位,用户需要定位的时候,自己手动点击按钮,再去定位当前位置.  经过2天研究 ...

  2. 百度地图定位SDK 之构想

    百度地图定位 前提 从香港旅游回来,心中油然升起一股热血滂湃,激励自己发现市场需求,向创业奋进,朝着梦想前进. 简介 百度Android定位SDK支持Android1.5以及以上设备,提供: 定位功能 ...

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

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

  4. IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息

    IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息 /**当获取到定位的坐标后,回调函数*/ - (void)didUpdateBMKUserLocation:(BMKUserLocati ...

  5. ios调用百度地图定位遇到的奇葩问题

    app项目过程中需要用到百度地图,然后网上可以查资料看官网文档,最后弄了好几天还是不行,找了各位前辈帮忙虽然解决了,但是把代码拷贝到我的项目时又无法定位了,最后查看了下原因是info配置出了问题,不是 ...

  6. 【ASP.NET 进阶】根据IP地址进行百度地图定位

    昨天有完成一个[ASP.NET 进阶]根据IP返回对应位置信息 的小Demo,既然可以通过IP获得位置信息,那当然可以通过位置信息的经纬度获取IP的当前定位了,虽然与实际地址偏移较大,毕竟不是GPRS ...

  7. iOS第三方地图－百度地图定位的封装

    // // BaiduMapTools.h // baidumapTest // // Created by apple on 15/8/26. // Copyright (c) 2015年 tqh. ...

  8. android中百度地图定位的实现方法（仅适用于真机+WIFI联网环境）

    注意:此代码的环境是:真机(系统版本为Android4.2.2)+WIFI联网(才能实现最后的运行结果):使用虚拟机调试会出现各种问题. 第一步:下载SDK和申请Key 到百度的网站http://de ...

  9. android 百度地图定位功能实现

    历经几天时间,终于把定位功能给实现了,可谓是费劲千辛万苦啊,有定位知识还有图层知识,在这里我把代码给大家贴出来,一起分享一下下啦. package com.example.foreveross.off ...

随机推荐

  1. DMV--sys.dm_os_ring_buffers

    DMV 'sys.dm_os_ring_buffers' 可以用来诊断数据库连接和数据库内存方面的问题,但MSDN上找不到相应的介绍,网上找到以下相关资料: 1>sys.dm_os_ring_b ...

  2. Tempdb--临时对象缓存

    SQL Server删除一个临时对象时,不移除该对象的条目,当再次使用时,就无须重新创建临时对象,SQL Server为临时对象缓存一个数据页和一个IAM页,并回收剩余页,如果临时表的大小超过8MB, ...

  3. .NET中的异常处理机制（一）

    1.异常处理的总体指导思想 学习C#中的异常处理机制,大概要了解以下几点: 首先,我们需要知道的事所有具体异常都是继承自System.Exception基类的. 其次,要熟悉FCL类库内置好的一些异常 ...

  4. Regular进阶: 几点性能优化的建议

    本文由作者郑海波授权网易云社区发布. 本文旨在用 20% 的精力解决使用Regular过程中 80% 的性能问题. 这里大部分是关于脏检查的性能优化,不了解的可以先看下<Regular脏检查介绍 ...

  5. python--类的约束,异常处理,MD5加密,日志处理logging模块

    1.类的约束 在开发中,如果项目经理需要对类进行约束,可以有两种方式 1. 对子类进行约束 Base: #对子类进行约束,必须重写这个方法 # 在工作中发现了NotImplementedError之后 ...

  6. Eclipse导出JAR过程

    Eclipse是一款免费的JAVA开发环境,被各个软件公司使用,可以说是目前使用最多的JAVA开发工具了,网址:http://www.eclipse.org 下面演示如何建立JAVA工程和导出JAR: ...

  7. JavaWeb -JDBC使用（数据库-javaweb连接）

    使用JDBC四个大类 1. DriverManager:管理jdbc驱动 2. Connection:连接(通过DriverManager产生) 3. Statement/PreparedStatem ...

  8. 0基础浅谈反射型xss(2)

    0x1:回顾前文疑惑“先闭合,在构造” 上一篇,我们说到了xss的一个触发精髓,“先闭合,在构造”,对于前面的先闭合,我们来简单的解释一下:   首先说,为什么要闭合? 因为HTML标签都是成对出现的 ...

  9. Elasticsearch基础知识

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口Elasticsearch是用Java开发的,并作为Apache ...

  10. How to write date range query in Nest ElasticSearch client?

    Looking at the source code, there are two overloads of the OnField method. When I use the the that t ...