【高德地图】vue使用高德地图（js api）

准备工作：一个已经搭建好的vue项目

（我使用的是1.4的版本）

高德地图官网地址：https://lbs.amap.com/

api文档：https://lbs.amap.com/api/javascript-api-v2/documentation

这篇记录的是高德地图里面的js api 

一、注册账号申请key和密钥

1.1  首先点击“控制台”进行登录，为了方便我采用的是“短信登录”,根据自己方便的方式进行登录，登录成功进去以后的界面如下图：

1.2  点击“创建新应用”,填写相关的信息

1.3  创建好以后点击右上角的“添加key”,并选择“Web端”，填写相关的信息；

1.4  最后就可以得到1.1中的效果

二、引入地图及地图初始化

回到首页---点击JS api---选择1.4的版本

2.1  然后在public/index.html中引入

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2.2  写一个空白的页面，可以自定义id，并在生命周期“mounted”中写以下代码，然后运行，即可得到地图。

  var map = new AMap.Map('map', {
        zoom:11,//级别
        center: [116.397428, 39.90923],//中心点坐标
        viewMode:'3D',//使用3D视图
        mapStyle: "amap://styles/blue",//地图类型
    });

2.3  常见的地图样式：（可以在“快速上手”页面的“亲手试一试”中体验），可以看见右下角有选择框，自己尝试调试一下。

amap://styles/normal: 默认地图样式；
amap://styles/darkblue: 黑蓝地图；
amap://styles/lightblue: 浅蓝地图；
amap://styles/grey: 灰色地图；
amap://styles/fresh: 清新地图；
amap://styles/blue: 蓝色地图；
amap://styles/whitesmoke: 白烟地图；

三、对地图的部分常用操作

3.1  给地图添加点标记

为了方便管理代码，我将地图初始化写在了一个方法里面，然后在mounted里面调用

 initamap() {
      var map = new AMap.Map("map", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        mapStyle: "amap://styles/blue",
        zoom: 5, //级别
        center: [110.397428, 37.90923], //中心点坐标
      });

      //添加点标记
      var marker = new AMap.Marker({
        position: [116.39, 39.9], //位置
        offset: new AMap.Pixel(-10, -10),//添加偏移程度
        icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL
      });
      map.add(marker); //添加到地图

    },

效果展示：

3.2  给地图添加多边形标记

AMap.Polyline 对象提供了在地图图面绘制折线的能力，可以为折线设置宽度，描边颜色、线条样式等属性。

initamap() {
      var map = new AMap.Map("map", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        mapStyle: "amap://styles/blue",
        zoom: 5, //级别
        center: [110.397428, 37.90923], //中心点坐标
      });


      //添加点标记
      var marker = new AMap.Marker({
        position: [116.39, 39.9], //位置
        offset: new AMap.Pixel(-10, -10), //添加偏移程度
        icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL
      });
      map.add(marker); //添加到地图

      //标记多边形
      var lineArr = [
        [113.368904, 39.9046],
        [100.382122, 39.9046],
        [113.387271, 29.912501],
        [113.368904, 39.9046],
      ];
      var polyline = new AMap.Polyline({
        path: lineArr, //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeWeight: 5, //线宽
        strokeStyle: "solid", //线样式
      });
      map.add(polyline);
    },

效果展示：

3.3  给地图添加矢量图形标记

AMap.Circle 对象为用户提供在地图图面绘制圆形覆盖物的能力。可以为圆形覆盖物设置填充颜色、描边颜色、轮廓线样式等属性。

    //初始化高德地图
    initamap() {
      var map = new AMap.Map("map", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        mapStyle: "amap://styles/blue",
        zoom: 5, //级别
        center: [110.397428, 37.90923], //中心点坐标
      });

      //添加点标记
      var marker = new AMap.Marker({
        position: [116.39, 39.9], //位置
        offset: new AMap.Pixel(-10, -10), //添加偏移程度
        icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL
      });
      map.add(marker); //添加到地图

      //标记多边形
      var lineArr = [
        [113.368904, 39.9046],
        [100.382122, 39.9046],
        [113.387271, 29.912501],
        [113.368904, 39.9046],
      ];
      var polyline = new AMap.Polyline({
        path: lineArr, //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeWeight: 5, //线宽
        strokeStyle: "solid", //线样式
      });
      map.add(polyline);

      //标记矢量图形
      var circle = new AMap.Circle({
        center: new AMap.LngLat(111.39, 40.9), // 圆心位置
        radius: 10000, // 圆半径
        fillColor: "pink", // 圆形填充颜色
        strokeColor: "#fff", // 描边颜色
        strokeWeight: 2, // 描边宽度
      });

      map.add(circle);
    },

效果展示：