js获取当前位置
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取当前位置</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:500px; width: 500px; margin: 0 auto;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
//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"
</script>
</head>
<body>
<div style="text-align: center; margin: 20px auto;">
<p id="demo">点击这个按钮，获得您的经纬度：</p>
<p id="position"></p>
<button onclick="getLocation()">获取位置</button>
</div>
<div id="container"></div>
<script type="text/javascript">
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 = "程序已获取你所在的位置为：<br>经度"+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;
alert(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;
}
}
</script>
</body>
</html>
js获取当前位置的更多相关文章
- js获取光标位置
js获取光标位置 var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- js获取元素位置和style的兼容性写法
今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...
- JS获取鼠标位置，兼容IE FF
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
- js获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- 使用高德地图JS获取当前位置和经纬度
先看效果,我做的是这样的,可以按地图位置来返回当前你点的位置(图一,二),也可以根据输入框的自动搜索(图三,四) HTML的代码: <div> <input type="t ...
- js获取鼠标位置
1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即 ...
- js获取对象位置的方法
scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...
- js 获取滚动位置，滚动到指定位置，平滑滚动
1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...
随机推荐
- hdu5521 ( Dijkstra )
题目描述: 给定一张图,问从1和n相遇的最短时间. 这道题的输入比较特殊,不能直接存,所以怎么输入,怎么存取,只要可以访问到一个节点的相邻节点就可以,由于spfa算法的时间复杂度为m*n,而Dijks ...
- arcgis for silverlight 鼠标点击地图获取当前经纬度
silverlight代码: 地图的name值是myMap.后台在页面初始化的时候,添加地图的点击事件 myMap.MouseClick+=new EventHandler<Map.MouseE ...
- 三步升级已安装的 Android SDK 和 ADT 插件（转载）
转载:http://www.tfan.org/update-adt-and-android-sdk-in-five-minutes/ 如何快速地把已安装的 Android SDK 及 Eclipse ...
- selenium中关于driver的小记
1: Ubuntu系统将driver放入 /usr/bin 目录下,即可直接启动浏览器. 2: WIN10系统讲Driver放入python安装的根目录下,即可直接启动浏览器. 3: WIN10 ...
- Windows下安装Ubuntu16.04双系统
ROS需要在Ubuntu系统上开发,虚拟机跑Ubuntu开发ROS容易出现各种各样的问题,所以需要安装Ubuntu16.04双系统.笔者也是一步步按着网上的帖子来,由于网上的教程都不是最新的而且有的也 ...
- 模拟 hihoCoder 1177 顺子
题目传送门 /* 模拟:简单的照着规则做就可以了,把各种情况考虑到,虽然比赛写的丑了点,但能1Y还是很开心的:) */ #include <cstdio> #include <cst ...
- jquery readio checked
今天太鬼火了为这个难问题搜了一下午了到最后还是csdn的朋友给了我正确的答案http://bbs.csdn.net/topics/300162450谢谢这位朋友 // $("#ISOK1&q ...
- redis 远程连接方法
解决方法 1.修改redis服务器的配置文件 vi redis.conf 注释以下绑定的主机地址 # bind 127.0.0.1 或 vim redis.conf bind 0.0.0.0 pr ...
- AJPFX解析成员变量和局部变量
成员变量和局部变量 3.1.成员变量和局部变量 A:在类中的位置不同 * 成员变量:在类中方法外 * 局部变量:在方法定义中或者方法声明上 B:在内存中的位置不同 ...
- 策略模式--Java篇
策略模式(Strategy):它定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化,不会影响到使用算法的客户. 下面将以商场打折为例子,说明策略模式.商场收银如何促销,用打折还是 ...