html5经纬度定位 源码_HTML5获取地理经纬度并通过百度接口得到实时位置
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获取地理经纬度并通过百度接口得到实时位置相关推荐
- html5经纬度定位 源码_HTML5教程 如何获取当前位置的经纬度
本篇教程探讨了HTML5教程 如何获取当前位置的经纬度,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 是想让地图的定位用户位置更准确一些. 查看了介绍: h ...
- html5经纬度定位 源码_基于浏览器的HTML5地理定位
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个 ...
- html5经纬度定位 源码_h5实现获取用户地理定位的实例代码
最近做的一个项目中有一个获取周围商户的功能,需要用到地理定位系统, 于是便想到了用 h5 的地理定位,查阅了下资料后,简单封装了下代码. const getPosition = ( timeout = ...
- html5经纬度定位 源码_利用HTML5定位功能获取经纬度,在根据经纬度利用百度地图获取位置信息...
一.引入相关js 二.js代码 // 单次位置请求执行的函数 function getLocation(){ navigator.geolocation.getCurrentPosition(mapI ...
- 前端录屏+定位源码,帮你快速定位线上bug
前言 如何快速定位线上bug,是多数开发者都会遇到的难题 web-see 前端监控方案,提供了 前端录屏+定位源码 方式,让bug无处藏身 这是前端监控的第二篇,该篇讲解如何实现错误还原功能,第一篇 ...
- 响应式重工业钢铁机械类网站pbootcms模板,html5工业设备网站源码下载
(自适应手机版)响应式重工业钢铁机械类网站pbootcms模板,html5工业设备网站源码下载. PbootCMS内核开发的网站模板,该模板适用于企业通用.营销型.钢铁.钢材.重工业.机械.工业设备. ...
- Spring IOC 容器源码分析 - 获取单例 bean
1. 简介 为了写 Spring IOC 容器源码分析系列的文章,我特地写了一篇 Spring IOC 容器的导读文章.在导读一文中,我介绍了 Spring 的一些特性以及阅读 Spring 源码的一 ...
- php get 返回源码,php源码 fsockopen获取网页内容实例详解
PHP fsockopen函数说明: Open Internet or Unix domain socket connection(打开套接字链接) Initiates a socket connec ...
- 案例:演示pageContext对象的使用及源码分析获取属性方法
一.创建pageContext.jsp <%@ page language="java" contentType="text/html; charset=UTF-8 ...
- 微信html5小游戏源码70种
2019独角兽企业重金招聘Python工程师标准>>> 微信html5小游戏源码70种 http://download.csdn.net/detail/csdddn/9419955游 ...
最新文章
- Java数据访问对象模式
- 「NLP」 聊聊NLP中的attention机制
- Cannot load 64-bit SWT libraries on 32-bit JVM
- python3 集合(set)
- 【Groovy】编译时元编程 ( 编译时方法注入 | 使用 buildFromSpec、buildFromString、buildFromCode 进行方法注入 )
- 基于struts2的寝室圈项目
- 毕业5年,我是怎么成为年薪30W的运维工程师
- 日志框架NLog之将日志发送到邮件
- python爬取网页数据出现中文乱码解决办法
- Ubuntu上安装Chrome浏览器
- 不是因为寂寞才想你计算机谱子,不是因为寂寞才想你曲谱
- 第十五届东北大学生编程大赛题解
- MySQL数据库存储过程讲解与实例
- 收藏功能前端实现代码
- c语言将矩形分成多个小正方形,蓝桥杯练习算法题(矩形切割成正方形)
- [转]键盘上的符号用英语怎么读?
- 机器学习实战课后习题(一)
- Auto CAD:CAD软件之设计中心、右栏工具选项板使用方法简介之详细攻略
- elasticsearch使用问题记录(一) 底层修改同义词典synonyms.txt未生效
- 分享我自己的导航网站bituplink导航 (附GitHub开源代码项目OneHtmlNav)
热门文章
- 在VM6.5中安装iPC_OSx86_10_5_6_Universal_PPF5_Final
- 怎么用dw修改PHP网页模板,DW基础篇:如何使用DW运用网页模板
- 输入表重建工具ImportREC
- 租用服务器多开虚拟机,云服务器多开虚拟机
- armlinux开发板用户自动登录
- 51nod-1534 棋子游戏
- Docker 安装(使用阿里源)
- extmail 发送邮件附件大小限制修改
- 30分钟做一个二维码名片应用,有源码!
- PHP实现牛津英汉词典