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 ...
随机推荐
- v-bind使用
v-bind基本使用 动态地绑定一个或多个属性,或者绑定一个组件 prop 到表达式. 语法:v-bind:属性名 = 属性值 <!-- 绑定一个 attribute --> <im ...
- 移动GPU分类/百科
ARM mali gpu四大微架构概述 https://zhuanlan.zhihu.com/p/107141045 http://www.neardi.com/news_23/487.html
- Python基础(序列化)
#pickling import pickle,json # d = dict(name='傻狗1',age=300,score=100) # d1 = pickle.dumps(d)#pickle. ...
- Matplotlib (一)
Matplotlib 用于 创建出版质量图标的绘图工具库 目的是为python构建一个 Matlab 式的绘图接口 import matplotlib.pyplot as plt pyplot 模块包 ...
- 菜鸡的Java笔记 第二十六 - java 内部类
/* innerClass 从实际的开发来看,真正写到内部类的时候是在很久以后了,短期内如果是自己编写代码,几乎是见不到内部类出现的 讲解它的目的第一个是为了解释概念 ...
- Android学习—下载Android SDK的两种方式
在Android Studio中下载Android SDK的两种方式 Android studio下载地址:http://www.android-studio.org/ 方式一.设置HTTP Prox ...
- [loj3329]有根树
题目即求$\min_{C}\max(|C|,\min_{x\notin C}w_{x})$,考虑将$w$从大到小排序,即为$\min_{1\le k\le n}\max(k,w_{k+1})$ 考虑若 ...
- ICCV2021 | SOTR:使用transformer分割物体
前言 本文介绍了现有实例分割方法的一些缺陷,以及transformer用于实例分割的困难,提出了一个基于transformer的高质量实例分割模型SOTR. 经实验表明,SOTR不仅为实例分割提供了 ...
- 花了30天才肝出来,史上最全面Java设计模式总结,看完再也不会忘
本文所有内容均节选自<设计模式就该这样学> 序言 Design Patterns: Elements of Reusable Object-Oriented Software(以下简称&l ...
- P7327 Dream and Discs
题目传送门. 题意简述:有 \(n\) 个数 \(a_1,a_2,\cdots a_n\),等概率选取区间 \(P_1,S_1\subseteq [1,n]\),\(P_2\subseteq P_1\ ...