前端引用高德地图SDK

首先，注册开发者账号，成为高德开放平台开发者。注册地址
然后获取到所要用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: 100%;height: 100%;"><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: ['填写默认的地图中心经纬度']//想要获取自己想要定位的精度度可自行百度});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>

备注很清晰，博主在这里祝各位小伙伴们成功！

--------------------------------------------------------------- END ------------------------------------------------------------------

珍惜眼前人，莫要失去才懂珍惜~~~

前端引用高德地图SDK相关推荐

Android 集成高德地图SDK
今天和大家分享一下如果在Android开发中引用高德地图的SDK以及实现定位,搜索,导航的功能 =-= 第一步:引入高德地图的SDK. 首先,进入高德地图开发平台,鼠标移至头像处,点击我的应用,然后新 ...
android 高德地图移动卡顿_Xamarin.Forms Android使用高德地图SDK
Xamarin.Forms Android 高德演示https://www.zhihu.com/video/1243224001301958656 介绍本编文章分为2节,第1节是介绍高德地图SDK与 ...
高德地图 SDK 的应用 01：绘制多边形区域图
遇到一需求:在高德地图上绘制多边形区域还能咋样,翻一翻高德地图sdk参考手册,发现了这样一个方法:[addPolygon(PolygonOptions options)] public final ...
flutter引入高德地图_Flutter笔记-调用原生IOS高德地图sdk
一.前言 2017年底因公司业务组合部门调整,新的团队部分维护的项目用React Native技术混合开发.为适应环境变化,开启疯狂RN学习之旅,晚上回来啃资料看视频.可能由于本身对RN技术体验不感冒 ...
[iOS]高德地图SDK开发--准备篇
本文是对高德地图SDK使用的总结,对于高德地图不做过多介绍,可直接登录其官网开放平台进行了解; PS: 这里主要是讲解地图使用的准备工作,最后,以显示地图并定位到当前位置来验证;对于其他的使用,可参看 ...
iOS调用高德地图SDK
准备工作: 安装CocoaPods 使用下载第三方库相同的方法下载SDK 方法如下: (1)打开终端,cd 文件路径进入到所创建的项目文件中 (2)输入pod init为该项目创建Podfile文件 ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
android 高德地图SDK报 KEY鉴权失败
android 高德地图SDK报 KEY鉴权失败. 一般在项目被转移,或项目使用的SDK被其他项目使用时,会发生这种情况! 解决办法进入高德地图api控制台点应用管理-我的应用-创建应用 - 根据 ...
【iOS】—— 高德地图SDK基础使用
最近稍微学了学iOS调用高德的SDK,就随便做做笔记.注意:本篇博客基于高德地图SDK的3D地图来写的,若使用的是2D地图可能有的方法可能有所不同,比如自定义定位蓝点之类的. 一.准备工作: 具体的准 ...

前端引用高德地图SDK

前端引用高德地图SDK相关推荐

最新文章

热门文章