<!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. XML--将XML中数据提取出转换成表2

    DECLARE @xml XMLSET @xml = '<Students>    <Student  id="1001" name = "xu&quo ...

  2. .net后台转json数据

    List<PostInfo> list = new List<PostInfo>();PostInfo postinfo = new PostInfo();list.Add(p ...

  3. 重装SQL前，一定要把SQL2005、SQL2008之类的彻底删除干净

    0.预备 如果你曾删除过VS2010或者VS2008之类的,同理也要照此方法删除 1.步骤,顺序无妨 卸载程序:控制面板---查找SQL..NET   删除干净 停掉SQL的所有服务:  计算机--管 ...

  4. Android 色差(尤其白色)的解决办法

    Android 中有时出现色差,我碰到的情况是 Galaxy ACE4 中的白色和系统白色不同,所以显示时候颜色不同,很难看. 我发现的问题是 Color.white, android.R.color ...

  5. Android 文件读写高级

    往设备里写文件有几种选择,写在内存中,或SD卡中. 往内存里写好处是,可以写在 data/data/包名 文件夹里,而此文件是不可访问的(除非 root).这样可以增加文件的安全性,避免被误删.缺点也 ...

  6. shell脚本报错：-bash: xxx: /bin/bash^M: bad interpreter: No such file or directory

    当我们把文件从windows系统中编辑的文件拷贝到linux系统中,如果我们执行文件会保存如下的错: shell脚本报错:-bash: xxx: /bin/bash^M: bad interprete ...

  7. 474. Ones and Zeroes

    In the computer world, use restricted resource you have to generate maximum benefit is what we alway ...

  8. mysql 基础整合大全

    mysql  数据库操作: 创建数据库: create database db_sanguo charset utf8; 切进db_sanguo use db_sanguo 删除数据库: drop d ...

  9. aspx代码审计-1

    今天和大家分享一下aspx网站的代码审计,漏洞类型就是SQL注入和cookie欺骗. 本文作者:i春秋签约作家——非主流 今天看的cms名字叫做:XX星员工请假系统 我们首先看一下网站的目录结构: 其 ...

  10. Performs the analysis process on a text and return the tokens breakdown of the text

    Analyzeedit Performs the analysis process on a text and return the tokens breakdown of the text. Can ...