web开发如何使用高德地图API（一）浏览器定位
说两句：
准备工作：
拿到key之后，在页面引入高德API和UI组件库以及相关CSS文件
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.3&key=3853mark的key不告诉你138eacc13d55806d&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
显示基础地图所用到的HTML和JS
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]//默认的地图中心经纬度
});
</script>
引入高德地图工具包js文件
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
浏览器定位所用到的JS
/**
* Created by Mark on 2018/5/3.
*/
//定位
map.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
}); //解析定位结果
function onComplete(data) {
if(data.status == 1){
console.log("定位成功");
$("#addressInput").val(data.formattedAddress);
sessionStorage.setItem("dingWei-lng",data.position.getLng());
sessionStorage.setItem("dingWei-lat",data.position.getLat());
}
var str = [];
str.push('经度：' + data.position.getLng());
str.push('纬度：' + data.position.getLat());
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
console.log(str.join('<br>'));
}
function onError() {
var str = [];
str.push('定位失败');
console.log(str.join('<br>'));
}
到这里为止，使用高德地图实现浏览器定位已经完成了。
但是...^_^
/***************************************
由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
***************************************/
web开发如何使用高德地图API（一）浏览器定位的更多相关文章
- web开发如何使用高德地图API（四）通过AMap.Marker自定义标点
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用高德地图API（三）点击热点打开信息窗体
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用高德地图API（二）结合输入提示和POI搜索插件
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- 高德地图api之location定位
关于定位,分为GPS定位和网络定位.本文将详细描述的浏览器定位,属于网络定位.这是一种通过使用高德JS-API来实现位置定位.城市定位的方法,包含了IP定位,检索等多种网络定位方式.如果您的手机支持G ...
- web开发如何使用百度地图API（一）判断点是否在范围内
准备工作 注册开发者 创建应用 拿到百度地图ak 前端实现方案 引入百度地图API和工具类库 <script type="text/javascript" src=" ...
- [WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程
前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...
- 【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享
原文:[高德地图API]那些年我们一起开发的APP—即LBS应用模式分享 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...
- 安卓开发笔记①：利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边（位置）
高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...
- 微信小程序-基于高德地图API实现天气组件(动态效果)
微信小程序-基于高德地图API实现天气组件(动态效果) 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
随机推荐
- bzoj3047:Freda的传呼机&&bzoj2125: 最短路
完结撒花!!!!!!!!!!! 最后一题填坑1A仙人掌WWWWWWW我真流弊 首先把环拆开,环中每一个点连向环的根,然后搞LCA,答案就是套路的d[x]+d[y]-d[lca]*2 然后就可以发现,其 ...
- 深入浅出时序数据库之预处理篇——批处理和流处理，用户可定制，但目前流行influxdb没有做
时序数据是一个写多读少的场景,对时序数据库以及数据存储方面做了论述,数据查询和聚合运算同样是时序数据库必不可少的功能之一.如何支持在秒级对上亿数据的查询分组聚合运算成为了时序数据库产品必须要面对的挑战 ...
- hdoj--1220--Cube（数学推导）
Cube Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- DMA（direct memory access）直接内存访问
DMA(Direct Memory Access),这里的 memory,指的是计算机的内存,自然与外存(storage)相对.这里的关键词在 Direct (直接),与传统的相对低效的,需要通过 C ...
- Linux下，安装配置Weblogic
环境说明 系统 -- Linux RHEL5 32bit 环境 -- 局域网中在192.168.0.140(windows)通过xshell连接服务器 软件 -- 1.JDK:1.5.0_15 2. ...
- E20170830-mk
translation n. 翻译; 译本; 转化; 转变; calculate vt. 计算; 估计; 打算,计划; 旨在; erase vt. 抹去; 清除; 擦掉;
- Docker EE/Docker CE简介与版本规划
随着Docker的不断流行与发展,docker公司(或称为组织)也开启了商业化之路,Docker 从 17.03版本之后分为 CE(Community Edition) 和 EE(Enterprise ...
- mybatis一对多关系的关联查询
问题描述:实现两张表的关联查询 学生表: 班级表: 要实现学生管理信息中有所在班级的名称,即如下图所示 1.对应学生表的pojo类写全班级表中的字段(适用于要连接的表字段较少的情况) sql语句直接在 ...
- Cordova 开发环境搭建及创建第一个app
整理记录使用cordova创建app应用程序并将其部署至Android系统移动设备上操作过程,具体如下: 一.前期安装环境 1. 安装JDK(java开发工具包) 2. 安装gradle 3. 安装A ...
- MarkDown流程图概要
要素 流程元素定义: 名称=>类型: 显示名称 控制流程定义: 名称1([yes,no],right)->名称2 注意事项 流程元素定义在代码上部, 流程走向定义在代码下部 名称可以取中文 ...