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 ...
随机推荐
- fabric运行记录
创建第一个fabric网络 Generate Network Artifacts cd first-network 先关闭服务 ./byfn.sh -m down 然后创建 ./byfn.sh -m ...
- 【不费脑筋系列】发布个人的代码包到Nuget服务器上,并通过VS引用进行使用的方法
打打酱油,写点不需要费脑筋的博客先压压惊. 下面讲个关于个人如何开发nuget包,并部署到nuget服务器上的例子.为了保证.net framework和 .net core都可以访问到我的包,我 ...
- 持续集成、持续交付(CI/CD)开篇,先来唠唠嗑
前言 现在稍微有点规模的系统,很多都是采用分布式/微服务架构,将一个大系统拆分为很多个功能模块进行开发.测试.发布.管理等,如果全部流程都采用人工的形式进行的话,效率肯定是超级不高效滴.而且现在很多项 ...
- 环境(8)Linux用户组权限
一:Linux时间日期-时间同步策略 1.日期与时间 ①时间命令 data:查看当前系统时间 cal :查看日历 cal 2020 修改时间: date -s 11:11:11 ...
- K8S使用NodePort类型Service
1.使用nodetype类型 1.1.第一种类型创建:直接在yaml中标记是nodePort apiVersion: v1 kind: Service metadata: name: nginx-se ...
- [bzoj1741]穿越小行星群
将每一行/每一列作为一个点,对于一个障碍(x,y),要么第x行和第y列的状态(是否攻击)只需要有一个就可以了,将第x行和第y列连边,就是二分图的最小点覆盖=最大匹配数. 1 #include<b ...
- [atARC103D]Robot Arms
合法的必要条件是每个点两维坐标和奇偶性相同,同时这也是充分条件 令$d_{i}=\{2^{0},2^{1},...,2^{m-1}\}$,归纳其可以走到任意满足$|x|+|y|<2^{m}$的$ ...
- 【HTML】标签
HTML标签 2020-09-08 15:37:37 by冲冲 1. 标签 <!DOCTYPE html> <html> <head> <meta cha ...
- 互联网java面试宝典
1.为什么使用消息队列啊? 答题: 消息队列的核心功能就是:解耦合,异步,流量削峰解耦:接口调用发送,那如果E系统也要这个数据呢?那如果C系统现在不需要了呢?现在A系统又要发送第二种数据了呢?A系统负 ...
- 理解ASP.NET Core - 过滤器(Filters)
注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 Filter概览 如果你是从ASP.NET一路走过来的,那么你一定对过滤器(Filter)不陌 ...