web网站开发基于高德地图浏览器定位

准备工作：

首先，注册开发者账号，成为高德开放平台开发者

登陆之后，在进入「应用管理」页面「创建新应用」

为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

拿到key之后，在页面引入高德API和UI组件库以及相关CSS文件

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key=你申请的key&plugin=AMap.CitySearch'></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

引入高德地图工具包js文件

<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>

显示基础地图和提示文字所用到的HTML容器

<div id="allmap" style="position: relative;width: 60%;height: 60%;"><div id="container"></div><div id="tip"></div>
</div>

浏览器定位所用到的JS脚本

<script type="text/javascript">var map, geolocation;var lng, lat;//加载地图，调用浏览器定位服务map = new AMap.Map('container', {resizeEnable: true,zoom: 11,center: [116.397428, 39.90923]//默认的地图中心经纬度});map.plugin('AMap.Geolocation', function () {geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：truebuttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});map.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息});//解析定位结果function onComplete(data) {var str = ['定位成功'];//获取当前地址//所在省var province = data.addressComponent.province;//所在城市var city = data.addressComponent.city;if (city.length == 0) {str.push('所在城市：' + province);} else {str.push('所在省：' + province);str.push('所在城市：' + city);}//所在区var district = data.addressComponent.district;str.push('所在地区：' + district);//所在乡镇var township = data.addressComponent.township;str.push('所在乡镇：' + township);//格式化地址var formattedAddress = data.formattedAddress;str.push('详细地址：' + formattedAddress);//获取当前经度纬度str.push('经度：' + data.position.getLng());str.push('纬度：' + data.position.getLat());if (data.accuracy) {str.push('精度：' + data.accuracy + ' 米');} //如为IP精确定位结果则没有精度信息str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));document.getElementById('tip').innerHTML = str.join('<br>');//调试弹窗/*lng = data.position.getLng();lat = data.position.getLat();alert(data.position.getLng() + "," + data.position.getLat());*/}//解析定位错误信息function onError(data) {document.getElementById('tip').innerHTML = '定位失败: <br/> <pre>' + JSON.stringify(data, null, 2) + '</pre>';}
</script>

到这里为止，使用高德地图实现浏览器定位已经完成了。

web网站开发基于高德地图浏览器定位相关推荐

高德地图——浏览器定位+点击获取经纬度+去除高德百度地图左下角logo
高德地图--浏览器定位+点击获取经纬度+去除高德百度地图左下角logo 1.代码 <!doctype html> <html> <head><meta cha ...
Android开发丶基于高德地图实现定位、搜索定位、绘制圆圈自定义图标及改变圆圈半径等功能
前一段时间接了个需求,进入一个地图界面,可以获取当前位置信息,通过输入位置信息获取位置,绘制圆圈并可以实时改变圆圈半径等功能,地图SDK我们使用的是高德地图,仔细阅读了开发文档,发现这些需求都可以通过 ...
android开发之高德地图不能定位，只显示格子
android 在引用高德地图组件进行开发的时候,不能定位,只显示格子,如下图所示: 参考了网上的一下大家的解决方案,主要是 (1)检查申请的KEY是否正确.PS:申请方法请参考这篇博客,写的很全很详 ...
Android基于高德地图实时定位服务
Service功能有:实时定位(后台进行) Service不会,去百度谷歌功能有实时定位(30秒间隔) 判断是否在规定的时间段内判断距离是否大于规定的距离判断服务是否在开启的状态服务代码:L ...
使用plugman开发cordova 高德地图定位插件
在开发的过程中我们更多的是使用别人开发的cordova插件,但是在使用的过程中经常会遇到一些不合自己心意的问题,那么我们就来使用plugman开发一个属于自己的cordova插件吧. 源码地址 : h ...
基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
项目 - Web地图开发【高德地图API】(二)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
基于高德地图实现vue3的移动端物流路线相关功能
基于高德地图实现vue3的移动端物流路线相关功能自我记录一.参考文档高德地图开放平台: https://lbs.amap.com/ Web开发-JSAPI文档: https://lbs.amap ...

web网站开发基于高德地图浏览器定位

web网站开发基于高德地图浏览器定位相关推荐

最新文章

热门文章