准备工作：一个已经搭建好的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);
},效果展示：
