高德地图web端接入

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#map
      parameter:{
         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({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量
          offset: [10, 20],
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: 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），后续文档和代码持续更新中