<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获取地理信息进行定位的更多相关文章

  1. java调用高德地图api实现通过ip定位访问者的城市

    所需东西:高德地图的key 注意:这个key是 web服务的key  和js的key不是一个key(若没有则自行创建,创建教程在文末) 高德地图的api文档:https://lbs.amap.com/ ...

  2. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  3. HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地

    <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...

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

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

  5. 批量调用百度地图API获取地址经纬度坐标

    1 申请密匙 注册百度地图API:http://lbsyun.baidu.com/index.php?title=webapi 点击左侧 “获取密匙” ,经过填写个人信息.邮箱注册等,成功之后在开放平 ...

  6. 高德地图API获取天气

    1.建立行政区规划清单表 use edw; drop table if exists dim_prov_city_adcode; create table if not exists dim_prov ...

  7. js调用百度地图api

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">   ...

  8. JS调用百度地图API标记地点

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. js调用高德地图的搜索api

    var city = $('#city')[0].value; AMap.plugin(['AMap.Autocomplete'],function(){ var autoOptions = { ci ...

随机推荐

  1. 数据代理Object.defineProperty()

    数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写) 数据代理 Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个 ...

  2. Nginx面试题(总结最全面的面试题!!!)

    https://blog.csdn.net/weixin_43122090/article/details/105461971

  3. 浏览器调用接口正常,jmeter调不通的可能原因

    首先,还是http状态码介绍(网上都能找到这些简介): 1xx 信息,服务器收到请求,需要请求者继续执行操作 2xx 成功,操作被成功接收并处理 3xx 重定向,需要进一步的操作以完成请求 4xx 客 ...

  4. 1组-Alpha冲刺-2/6

    一.基本情况 队名:震震带着六菜鸟 组长博客:https://www.cnblogs.com/Klein-Wang/p/15535649.html 小组人数:7人 二.冲刺概况汇报 王业震 过去两天完 ...

  5. Hi3516开发笔记(二):Hi3516虚拟机基础环境搭建之串口调试、网络连接以及sftp文件传输

    前言   搭建Hi3516的基础虚拟机,为交叉编译环境搭建前期工作.后续会编译一个基本的C语言程序Demo,在HI3516上跑.   虚拟机   开发本对虚拟机做了一些基本要求,如下图:    其实重 ...

  6. (数据科学学习手札131)pandas中的常用字符串处理方法总结

    本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 在日常开展数据分析的过程中,我们经常需要对 ...

  7. 会话Cookie与session的关系

    在通常的使用中,我们只知道session信息是存放在服务器端,而cookie是存放在客户端.但服务器如何使用session和客户端之间进行通信,以及jsessionId是怎么回事,这并没有一个完整和正 ...

  8. [luogu4747]Intrinsic Interval

    有一个结论,答案一定是所有包含其合法区间中$l$最大且$r$最小的 证明比较容易,考虑两个合法区间有交,那么交必然合法,同时交也必然包含该区间,因此这个区间一定是合法的(取$l$最大的和$r$最小的两 ...

  9. 关于 RocketMQ ClientID 相同引发的消息堆积的问题

    首先,造成这个问题的 BUG RocketMQ 官方已经在 3月16号 的这个提交中修复了,这里只是探讨一下在修复之前造成问题的具体细节,更多的上下文可以参考我之前写的 <RocketMQ Co ...

  10. 详解Python Streamlit框架,用于构建精美数据可视化web app,练习做个垃圾分类app

    今天详解一个 Python 库 Streamlit,它可以为机器学习和数据分析构建 web app.它的优势是入门容易.纯 Python 编码.开发效率高.UI精美. 上图是用 Streamlit 构 ...