js调用高德地图API获取地理信息进行定位
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=(需要自己去高德官网获取)"></script>
<script type="text/javascript">
var map = new AMap.Map('mapContainer', {
resizeEnable: true
}) map.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
})
// 获取当前位置信息
geolocation.getCurrentPosition();
// 监听获取位置信息成功的回调函数
AMap.event.addListener(geolocation, 'complete', onComplete);
// 监听获取位置信息错误的回调函数
AMap.event.addListener(geolocation, 'error', onError); function onComplete (data) {
// data是具体的定位信息
addComp = data.addressComponent;
// 获取信息中的省市区并放入到输入框中
$("#fsenderAddress").val(addComp.province+"-"+addComp.city+"-"+addComp.district).trigger("change");
$("#fsenderCountyCode").val(addComp.adcode);
let fsenderMsg = {
'fsenderAddress':$("#fsenderAddress").val(),
'fsenderCountyCode':$("#fsenderCountyCode").val()
}
window.sessionStorage.setItem('fsendMsg', JSON.stringify(fsenderMsg));
} function onError (error) {
// 定位出错
console.log(error)
}
}) </script>
js调用高德地图API获取地理信息进行定位的更多相关文章
- java调用高德地图api实现通过ip定位访问者的城市
所需东西:高德地图的key 注意:这个key是 web服务的key 和js的key不是一个key(若没有则自行创建,创建教程在文末) 高德地图的api文档:https://lbs.amap.com/ ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
- HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...
- 解析高德地图api获取省市区,生成最新三级联动sql表
前言: 最近项目中用到了全国省市区三级信息,但是网上找到的信息都是比较旧的信息.与现在最新的地区信息匹配不上.后来想到高德地图上可能有这些信息.所以解析了一下api接口,生成了相关省市区的sql信息. ...
- 批量调用百度地图API获取地址经纬度坐标
1 申请密匙 注册百度地图API:http://lbsyun.baidu.com/index.php?title=webapi 点击左侧 “获取密匙” ,经过填写个人信息.邮箱注册等,成功之后在开放平 ...
- 高德地图API获取天气
1.建立行政区规划清单表 use edw; drop table if exists dim_prov_city_adcode; create table if not exists dim_prov ...
- js调用百度地图api
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JS调用百度地图API标记地点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js调用高德地图的搜索api
var city = $('#city')[0].value; AMap.plugin(['AMap.Autocomplete'],function(){ var autoOptions = { ci ...
随机推荐
- 数据代理Object.defineProperty()
数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写) 数据代理 Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个 ...
- Nginx面试题(总结最全面的面试题!!!)
https://blog.csdn.net/weixin_43122090/article/details/105461971
- 浏览器调用接口正常,jmeter调不通的可能原因
首先,还是http状态码介绍(网上都能找到这些简介): 1xx 信息,服务器收到请求,需要请求者继续执行操作 2xx 成功,操作被成功接收并处理 3xx 重定向,需要进一步的操作以完成请求 4xx 客 ...
- 1组-Alpha冲刺-2/6
一.基本情况 队名:震震带着六菜鸟 组长博客:https://www.cnblogs.com/Klein-Wang/p/15535649.html 小组人数:7人 二.冲刺概况汇报 王业震 过去两天完 ...
- Hi3516开发笔记(二):Hi3516虚拟机基础环境搭建之串口调试、网络连接以及sftp文件传输
前言 搭建Hi3516的基础虚拟机,为交叉编译环境搭建前期工作.后续会编译一个基本的C语言程序Demo,在HI3516上跑. 虚拟机 开发本对虚拟机做了一些基本要求,如下图: 其实重 ...
- (数据科学学习手札131)pandas中的常用字符串处理方法总结
本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 在日常开展数据分析的过程中,我们经常需要对 ...
- 会话Cookie与session的关系
在通常的使用中,我们只知道session信息是存放在服务器端,而cookie是存放在客户端.但服务器如何使用session和客户端之间进行通信,以及jsessionId是怎么回事,这并没有一个完整和正 ...
- [luogu4747]Intrinsic Interval
有一个结论,答案一定是所有包含其合法区间中$l$最大且$r$最小的 证明比较容易,考虑两个合法区间有交,那么交必然合法,同时交也必然包含该区间,因此这个区间一定是合法的(取$l$最大的和$r$最小的两 ...
- 关于 RocketMQ ClientID 相同引发的消息堆积的问题
首先,造成这个问题的 BUG RocketMQ 官方已经在 3月16号 的这个提交中修复了,这里只是探讨一下在修复之前造成问题的具体细节,更多的上下文可以参考我之前写的 <RocketMQ Co ...
- 详解Python Streamlit框架,用于构建精美数据可视化web app,练习做个垃圾分类app
今天详解一个 Python 库 Streamlit,它可以为机器学习和数据分析构建 web app.它的优势是入门容易.纯 Python 编码.开发效率高.UI精美. 上图是用 Streamlit 构 ...