获取当前位置

html{height:100%}

body{height:100%;margin:0px;padding:0px}

#container{height:500px; width: 500px; margin: 0 auto;}

//v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"

//v1.4版本及以前版本的引用方式:src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"

点击这个按钮,获得您的经纬度:

获取位置

var map;

var ggPoint;

var marker;

function getLocation(){

//根据IP获取城市

var myCity = new BMap.LocalCity();

myCity.get(getCityByIP);

var options={

enableHighAccuracy:true,

maximumAge:1000

}

if(navigator.geolocation){

//浏览器支持geolocation

navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

}else{

//浏览器不支持geolocation

console.log("浏览器不支持");

}

}

function onSuccess(position){

var longitude =position.coords.longitude;//经度

var latitude = position.coords.latitude;//纬度

document.getElementById("demo").innerHTML = "程序已获取你所在的位置为:
经度"+longitude+",纬度"+latitude;

//--------------设置地图显示----------------

map = new BMap.Map("container"); // 创建地图实例

ggPoint = new BMap.Point(longitude, latitude); // 创建点坐标

map.centerAndZoom(ggPoint, 15); // 初始化地图,设置中心点坐标和地图级别

//--------------设置地图显示----------------

var convertor = new BMap.Convertor();

var pointArr = [];

pointArr.push(ggPoint);

convertor.translate(pointArr, 1, 5, translateCallback);

//--------------设置标注相关-------------------

/*var marker = new BMap.Marker(point); // 创建点

map.addOverlay(marker);

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

marker.enableDragging();//设置点可拖动

//--------------设置标注相关---------------------

//--------------获取地理位置---------------------

var geoc = new BMap.Geocoder();

geoc.getLocation(point, function(rs){

var addComp = rs.addressComponents;

alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

});*/

//--------------获取地理位置----------------------

}

//坐标转换完之后的回调函数

function translateCallback(data){

if(data.status === 0) {

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

map.addOverlay(marker);

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

marker.enableDragging();//设置点可拖动

marker.addEventListener("dragend",getAttr);

//alert(marker.getPosition());

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

getPosit(data.points[0]);

}

}

function getAttr(){

var p = marker.getPosition(); //获取marker的位置

//alert("marker的位置是" + p.lng + "," + p.lat);

getPosit(new BMap.Point(p.lng, p.lat));

}

function getPosit(obj){

var geoc = new BMap.Geocoder();

geoc.getLocation(obj, function(rs){

var addComp = rs.addressComponents;

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

var address = "您的地址:" + addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + "," + addComp.streetNumber;

document.getElementById("position").innerHTML = address;

//var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });

//marker.setLabel(labelbaidu); //添加百度标注

});

}

//根据IP获取城市

function getCityByIP(rs) {

var cityName = rs.name;

alert("根据IP定位您所在的城市为:" + cityName);

}

//失败时

function onError(error){

switch(error.code){

case 1:

alert("位置服务被拒绝");

break;

case 2:

alert("暂时获取不到位置信息");

break;

case 3:

alert("获取信息超时");

break;

case 4:

alert("未知错误");

break;

}

}

html5经纬度定位 源码_HTML5获取地理经纬度并通过百度接口得到实时位置相关推荐

  1. html5经纬度定位 源码_HTML5教程 如何获取当前位置的经纬度

    本篇教程探讨了HTML5教程 如何获取当前位置的经纬度,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 是想让地图的定位用户位置更准确一些. 查看了介绍: h ...

  2. html5经纬度定位 源码_基于浏览器的HTML5地理定位

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个 ...

  3. html5经纬度定位 源码_h5实现获取用户地理定位的实例代码

    最近做的一个项目中有一个获取周围商户的功能,需要用到地理定位系统, 于是便想到了用 h5 的地理定位,查阅了下资料后,简单封装了下代码. const getPosition = ( timeout = ...

  4. html5经纬度定位 源码_利用HTML5定位功能获取经纬度,在根据经纬度利用百度地图获取位置信息...

    一.引入相关js 二.js代码 // 单次位置请求执行的函数 function getLocation(){ navigator.geolocation.getCurrentPosition(mapI ...

  5. 前端录屏+定位源码,帮你快速定位线上bug

    前言 如何快速定位线上bug,是多数开发者都会遇到的难题 web-see 前端监控方案,提供了 前端录屏+定位源码 方式,让bug无处藏身 这是前端监控的第二篇,该篇讲解如何实现错误还原功能,第一篇 ...

  6. 响应式重工业钢铁机械类网站pbootcms模板,html5工业设备网站源码下载

    (自适应手机版)响应式重工业钢铁机械类网站pbootcms模板,html5工业设备网站源码下载. PbootCMS内核开发的网站模板,该模板适用于企业通用.营销型.钢铁.钢材.重工业.机械.工业设备. ...

  7. Spring IOC 容器源码分析 - 获取单例 bean

    1. 简介 为了写 Spring IOC 容器源码分析系列的文章,我特地写了一篇 Spring IOC 容器的导读文章.在导读一文中,我介绍了 Spring 的一些特性以及阅读 Spring 源码的一 ...

  8. php get 返回源码,php源码 fsockopen获取网页内容实例详解

    PHP fsockopen函数说明: Open Internet or Unix domain socket connection(打开套接字链接) Initiates a socket connec ...

  9. 案例:演示pageContext对象的使用及源码分析获取属性方法

    一.创建pageContext.jsp <%@ page language="java" contentType="text/html; charset=UTF-8 ...

  10. 微信html5小游戏源码70种

    2019独角兽企业重金招聘Python工程师标准>>> 微信html5小游戏源码70种 http://download.csdn.net/detail/csdddn/9419955游 ...

最新文章

  1. Java数据访问对象模式
  2. 「NLP」 聊聊NLP中的attention机制
  3. Cannot load 64-bit SWT libraries on 32-bit JVM
  4. python3 集合(set)
  5. 【Groovy】编译时元编程 ( 编译时方法注入 | 使用 buildFromSpec、buildFromString、buildFromCode 进行方法注入 )
  6. 基于struts2的寝室圈项目
  7. 毕业5年,我是怎么成为年薪30W的运维工程师
  8. 日志框架NLog之将日志发送到邮件
  9. python爬取网页数据出现中文乱码解决办法
  10. Ubuntu上安装Chrome浏览器
  11. 不是因为寂寞才想你计算机谱子,不是因为寂寞才想你曲谱
  12. 第十五届东北大学生编程大赛题解
  13. MySQL数据库存储过程讲解与实例
  14. 收藏功能前端实现代码
  15. c语言将矩形分成多个小正方形,蓝桥杯练习算法题(矩形切割成正方形)
  16. [转]键盘上的符号用英语怎么读?
  17. 机器学习实战课后习题(一)
  18. Auto CAD:CAD软件之设计中心、右栏工具选项板使用方法简介之详细攻略
  19. elasticsearch使用问题记录(一) 底层修改同义词典synonyms.txt未生效
  20. 分享我自己的导航网站bituplink导航 (附GitHub开源代码项目OneHtmlNav)

热门文章

  1. 在VM6.5中安装iPC_OSx86_10_5_6_Universal_PPF5_Final
  2. 怎么用dw修改PHP网页模板,DW基础篇:如何使用DW运用网页模板
  3. 输入表重建工具ImportREC
  4. 租用服务器多开虚拟机,云服务器多开虚拟机
  5. armlinux开发板用户自动登录
  6. 51nod-1534 棋子游戏
  7. Docker 安装(使用阿里源)
  8. extmail 发送邮件附件大小限制修改
  9. 30分钟做一个二维码名片应用,有源码!
  10. PHP实现牛津英汉词典