1、准备阶段

进入高德开发平台（高德开放平台 | 高德地图API），登录你的账号，如果没有账号需要先注册，进行开发者的认证，这里由于我已经认证过了，所以直接注册流程就不展示了。

打开控制台，选择应用管理-我的应用，创建一个新的应用，填写好应用名称和应用类型之后点击新建。

接下来为这个新应用添加一个Key，点击添加，填写好key名称之后，选择服务平台为Web端（JS API），选择提交

创建Key成功之后，我们得到了我们的Key和安全密钥，接下来的开发我们会用到这两个东西。至此我们的准备工作就完成了。

2、页面开发

JS api的引入，官方通过了两种方案，我们用的是vue开发，所以使用第一种方案，用npm安装JSAPI Loader

按 nmp 方式安装 Loader

npm i @amap/amap-jsapi-loader --save

新建vue文件，引入JSAPI Loader

import AMapLoader from '@amap/amap-jsapi-loader';

1、基本地图使用

添加地图div

<div id="container"></div>
//初始化必须设置高度和宽度
#container {width:1000px;height: 500px;}

定义data

data() {return {//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。//map:null,//地图加载参数AMapLoader:{"key": process.env.VUE_APP_GAODE_KEY,        // 申请好的Web端开发者Key，首次调用 load 时必填"version": "2.0",       // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": [],            // 需要使用的插件列表，如比例尺'AMap.Scale'等},//地图绘制参数//更多参数可访问 https://lbs.amap.com/api/jsapi-v2/documentation#mapparameter:{zoom:11,//级别center: [116.397428, 39.90923],//中心点坐标viewMode:'3D'//使用3D视图}}},

地图初始化加载

//地图初始化应该在地图容器div已经添加到DOM树之后,所以放到mounted里面mounted() {AMapLoader.load(this.AMapLoader).then((AMap)=>{this.map = new AMap.Map('container',this.parameter);}).catch(e => {console.log(e);})},

页面查看效果

2、地图定位

1、地图初始化加载定位到当前城市

创建AMap.Map对象时如果没有传入center参数，您会发现地图将自动定位到您所在城市并显示，这就是JS API的初始加载定位，

parameter:{zoom:11,//级别//不传入center参数，地图将自动定位到您所在城市并显示/*center: [116.397428, 39.90923],//中心点坐标*/viewMode:'3D'//使用3D视图
}

地图初始化加载定位到当前城市效果图

2、浏览器定位

地图初始化加载的定位只能获取到城市级别信息，如果想获取到具体的位置就要借助浏览器定位。高德JS API提供了AMap.Geolocation插件来实现定位，

引入定位插件 AMap.Geolocation

AMapLoader:{"key": process.env.VUE_APP_GAODE_KEY,        // 申请好的Web端开发者Key，首次调用 load 时必填"version": "2.0",       // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": ['AMap.Geolocation'],        // 需要使用的插件列表，如比例尺'AMap.Scale'等
},

初始化插件并添加定位按钮到地图右下角

var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 10000,// 定位按钮的停靠位置的偏移量offset: [10, 20],//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,// 定位按钮的排放位置,  RB表示右下position: 'RB'})
this.map.addControl(geolocation);

绑定回调函数，由于获取当前位置为异步请求，

geolocation.getCurrentPosition((status,result)=>{if(status=='complete'){//成功的回调函数this.onComplete(result);}else{//失败的回调函数this.onError(result);}
});

回调函数定义，这里失败的回调函数是调用IP定位获取当前城市信息（第三种定位方式）

    //获取定位成功的回调函数onComplete(result) {//做一些事情，比如将位置信息进行处理展示在坐标点上},//获取定位失败的回调函数onError(result){//定位失败，调用ip定位方式console.log(result)this.ipPosition()},

成功获取定位，回调函数的返回值，返回值中的position就是我们的位置信息，返回的类型是基础类经纬度 AMap.LngLat，

获取定位失败返回值

3、IP定位获取当前城市信息

如果不需要获取精确的位置，只需要城市级别的定位信息，推荐使用AMap.CitySearch插件，AMap.CitySearch插件获取所在城市相比通过浏览器定位的方式也更快捷。

//IP定位获取当前城市信息
ipPosition(){AMap.plugin('AMap.CitySearch', ()=> {var citySearch = new AMap.CitySearch()citySearch.getLocalCity((status, result)=> {if (status === 'complete' && result.info === 'OK') {// 查询成功，result即为当前所在城市信息console.log(result)this.map.setBounds(result.bounds);}})})
}

获取成功返回值，返回值中的AMap.Bounds类中包含我们所在城市的信息

IP定位效果图

3、添加地图控件

地图图面可以通过插件的方式添加地图基础控件。地图图面控件包括工具条、比例尺、定位、鹰眼、基本图层切换等多种插件

              // 同时引入工具条插件，比例尺插件和鹰眼插件AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType','AMap.ControlBar'], ()=>{// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件this.map.addControl(new AMap.ToolBar());// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺this.map.addControl(new AMap.Scale());// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图this.map.addControl(new AMap.HawkEye({isOpen:false}));// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制this.map.addControl(new AMap.MapType());//组合了旋转、倾斜、复位在内的地图控件。this.map.addControl(new AMap.ControlBar());});

添加控件效果图

demo代码地址（https://github.com/luft-mensch/gaode-baidu-map-demo），后续文档和代码持续更新中

高德地图web端接入相关推荐

前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
前端系列——vue2+高德地图web端开发（使用和引入）
vue2+高德地图web端开发(使用和引入) 前言基础准备工作高德地图的个人开发者注册高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加高德 2.0 新增 ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)
使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记. 当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等.这里就先说一下点 ...
高德地图WEB端软件应用
以前就想自己做一个旅游导航项目,在网上一搜发现了高德地图开放平台,发现高德可以非常简单地应用到自己的项目中,当即我申请了一个 key来学习,仔细研究了一下,觉得还是挺难的,网上找了一些案例什么的,经过 ...
高德地图WEB端，在所画的圆（Circle）内显示在圆（Marker）内的点
1.圆和点都是自己定义的,如图: 2.在高德地图的示例中心测试通过,代码如下: <!doctype html> <html> <head><meta char ...
高德地图web端js
下面是一些高德地图使用例子,自定义展示,右击拖动,搜索,画圆,定位等功能,没有整理仅供参考 var infoWindow = new AMap.InfoWindow({isCustom:true,// ...
高德地图-web端根据地理编码和逆地理编码
首先,用地址生成器快速生成一张地图,网址为lbs.amap.com/console/show/tools: <!DOCTYPE html> <html> <head> ...
高德地图 web 端 JS API 遇到的坑及性能优化
[JS API V2.0] 本指望全面提升一下性能,结果发现一些硬伤,迫不得已转到1.4.15版本,先说一下最新的v2.0的问题. 因为务业需要规划线路,但是这个版本中,规划线路,并且经过中间点时,部 ...

高德地图web端接入