项目开发需要获取用户详细的地理位置信息,使用了高德地图API接口

1,注册高德地图开发者账号获取开发者Key

2,页面调用

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=您申请的key值"></script>

3,示例代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>获取地理位置</title>
<style type="text/css">#iCenter{width:300px; height: 280px; border:1px #000 solid;margin:20px auto;}</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=3df877a70685dac5ecb3afa375d4c305"></script>
</head>
<body> <div id="iCenter"></div> <script type="text/javascript">
var mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位,默认:true
timeout: 10000, // 超过10秒后停止定位,默认:无穷大
maximumAge: 0, // 定位结果缓存0毫秒,默认:0
convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, // 显示定位按钮,默认:true
buttonPosition: 'LB', // 定位按钮停靠位置,默认:'LB',左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
showMarker: true, // 定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, // 定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy:true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
});
mapObj.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息
AMap.event.addListener(geolocation, 'error', onError); // 返回定位出错信息
}); function onComplete(obj){
var res = '经纬度:' + obj.position +
'\n精度范围:' + obj.accuracy +
'米\n定位结果的来源:' + obj.location_type +
'\n状态信息:' + obj.info +
'\n地址:' + obj.formattedAddress +
'\n地址信息:' + JSON.stringify(obj.addressComponent, null, 4);
alert(res);
} function onError(obj) {
alert(obj.info + '--' + obj.message);
console.log(obj);
}
</script>
</body>
</html>

复制代码直接保存到html文件中,在手机端查看具体信息

手机端获取用户详细地理位置(高德地图API)的更多相关文章

  1. js获取用户当前地理位置(省、市、经纬度)

    在很多情况下,我们需要用到定位功能,来获取用户当前位置.当前比较流行的定位API有腾讯地图.百度地图.高德地图.搜狗地图等等,在这里我使用的是腾讯地图定位API,根据用户IP获取用户当前位置,API返 ...

  2. 如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介

    如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介 一.总结 一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...

  3. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

  4. web网站如何获取用户的地理位置

    web网站如何获取用户的地理位置 一.总结 一句话总结:通过gps知道用户的经度和纬度,然后通过经度和纬度在在地图(google或者百度)上面显示位置. 1.html5如何通过gps知道用户的经度和纬 ...

  5. 解析高德地图api获取省市区,生成最新三级联动sql表

    前言: 最近项目中用到了全国省市区三级信息,但是网上找到的信息都是比较旧的信息.与现在最新的地区信息匹配不上.后来想到高德地图上可能有这些信息.所以解析了一下api接口,生成了相关省市区的sql信息. ...

  6. 钉钉开发入门,微应用识别用户身份,获取用户免登授权码code,获取用户userid,获取用户详细信息

    最近有个需求,在钉钉内,点击微应用,获取用户身份,根据获取到的用户身份去企业内部的用户中心做校验,校验通过,相关子系统直接登陆; 就是在获取这个用户身份的时候,网上的资料七零八落的,找的人烦躁的很,所 ...

  7. js获取用户实时地理位置

    js获取用户实时地理位置 if(navigator.geolocation) { var id = navigator.geolocation.watchPosition(function(posit ...

  8. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

  9. 【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

    原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...

随机推荐

  1. streamsets Executors 说明

    执行程序阶段在收到事件时触发任务.执行者不会写入或存储事件. 将执行程序用作事件流中数据流触发器的一部分,以执行事件驱动的与管道相关的任务,例如在目标关闭时移动完全写入的文件. 可以使用的execut ...

  2. graphql 文档 docker 镜像

    因为一些原因 graphql 的官方文档无法查看,后者查看不能是方便,所以在官方github 的文档基础上添加了容器构建, 方便进行查看,对于公司内部使用学习会比较好 原理 很简单,openresty ...

  3. macOS -- Mac系统如何编辑hosts文件

    Hosts是一个没有扩展名的系统文件,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文 ...

  4. 【转】foxmail邮箱我已进清理了为什么还是说我的邮箱已满

    原文网址:http://zhidao.baidu.com/link?url=YmX_tBenMVsCopjljd80e2Jwvh7H8GnVSrDLeKKBNQkh_Ty50IsX5eAIy4P_64 ...

  5. hadoop YARN配置参数剖析—MapReduce相关参数

    MapReduce相关配置参数分为两部分,分别是JobHistory Server和应用程序参数,Job History可运行在一个独立节点上,而应用程序参数则可存放在mapred-site.xml中 ...

  6. 根据给定文件编写Makefile文件 两种方法编译

    实例一 1.分析源文件代码依赖关系 mian.c #include "test1.h" #include "test2.h" #include <stdi ...

  7. python数据库连接池基于DBUtils

    DBUtils模块的使用的两种方式 DBUtils是Python的一个用于实现数据库连接池的模块 安装 pip install DBUtils 1.使用姿势一(不建议此方法) 为每个线程 (资源占用过 ...

  8. mysql之SQLYog配置

    SQLyog(MySQL图形化开发工具) 安装: 提供的SQLyog软件为免安装版,可直接使用 使用: 输入用户名.密码,点击连接按钮,进行访问MySQL数据库进行操作

  9. jeesite快速开发平台(一)----简介

    转自:https://blog.csdn.net/u011781521/article/details/54880170

  10. 跟我学算法- tensorflow 实现RNN操作

    对一张图片实现rnn操作,主要是通过先得到一个整体,然后进行切分,得到的最后input结果输出*_w[‘out’] + _b['out']  = 最终输出结果 第一步: 数据载入 import ten ...