<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. vuex4 极速入门到上手

    vuex4 是 vue3的兼容版本,提供了和vuex3 的相同API.因此我们可以在 vue3 中复用之前已存在的 vuex 代码. 一.安装以及初始化 vuex4安装: npm install vu ...

  2. Part 61 to 63 Talking about partial class and partial method in C#

    部分类和部分方法 部分类是用partial声明的类,它允许我们把一个类分割成两个或多个类,当应用程序编译的完成的时候,多个部分类会结合成一个类,同时partial关键字也可以用于声明结构和接口. 那么 ...

  3. 如何看待 SAE 在2014 年 3 月 24 日发生的的大面积宕机事故?

    3 月 24 日晚间大约 23 点左右,新浪云 SAE 一处核心机柜掉电,导致 SAE 平台下大量应用无法正常访问,并在 10 小时后才陆续修复.这次事故暴露 SAE 的哪些缺陷?SAE 运维人员又是 ...

  4. 【golang必备算法】 Letecode 146. LRU 缓存机制

    力扣链接:146. LRU 缓存机制 思路:哈希表 + 双向链表 为什么必须要用双向链表? 因为我们需要删除操作.删除一个节点不光要得到该节点本身的指针,也需要操作其前驱节点的指针,而双向链表才能支持 ...

  5. AgileConfig-1.5.5 发布 - 支持 JSON 编辑模式

    本次更新加入了2个新的编辑模式:JSON 编辑模式.TEXT 编辑模式.特别是 JSON 编辑模式是大家比较期待的一个功能.因为大家都习惯了 appsettings.json 的配置编辑模式,所以天生 ...

  6. 【HTML】基础

    HTML基础 2019-07-23  10:16:28  by冲冲 在线编辑HTML/CSS/JS效果,实时查看效果 https://c.runoob.com/front-end/61 1. 概念 ① ...

  7. Redis、Zookeeper实现分布式锁——原理与实践

    Redis与分布式锁的问题已经是老生常谈了,本文尝试总结一些Redis.Zookeeper实现分布式锁的常用方案,并提供一些比较好的实践思路(基于Java).不足之处,欢迎探讨. Redis分布式锁 ...

  8. CF1354F Summoning Minions

    考虑我们一定是先放我们选定了\(m\)个数,一定是先放了\(m-1\)个数上去,然后让放上一个不打算选的然后拿下来,白嫖\(b * (m-1)\)的贡献,最后放上一个打算放的. 考虑我们一定是按\(b ...

  9. 关于单倍型和Phasing

    单倍型,即单倍体基因型,概念很好理解. 单倍型分型的过程就称之Phasing,定相或基因分型. Phasing的意义,在人类疾病遗传和动植物群体遗传中非常重要.也是imputation的必经过程. v ...

  10. C语言计算fastq文件GC含量2

    改进了一下,利用zlib可以读取gz格式的压缩文件,也可以直接计算非压缩格式 #include <stdio.h> #include <stdlib.h> #include & ...