1、看官网新手入门链接导入原生高德地图：

JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0|高德地图API (amap.com)

具体步骤：

第一步，安装插件

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

第二步，在vue组件中写代码显示地图

<template>
  <div class="hello">
    <div id="container"></div>
  </div>
</template>


<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      map: undefined
    };
  },
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      let that = this;
      AMapLoader.load({
        key: "d82a9a539035486ae09a991aebc24d20", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Autocomplete", //输入提示插件
          "AMap.PlaceSearch", //POI搜索插件
          "AMap.Scale", //右下角缩略图插件 比例尺
          "AMap.OverView", //地图鹰眼插件
          "AMap.ToolBar", //地图工具条
          "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          "AMap.PolyEditor", //编辑 折线多，边形
          "AMap.CircleEditor", //圆形编辑器插件
          "AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置
          "MarkerClusterer",
          "AMap.HeatMap",
          "AMap.DistrictLayer",
          "AMap.Heatmap",
          "AMap.DistrictSearch",
          "AMap.Object3DLayer"
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          const map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "2D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923] // 初始化地图中心点位置
          });
          that.map = map;
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#container {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

2、uniapp开发h5，使用map组件，使用高德地图：

在配置文件中配置地图为高德，（默认使用的是腾讯），然后填写key

然后在页面上写就好了：

<map id="map" :scale="scale" :polyline="polyline" :latitude="latitude" :longitude="longitude" :markers="covers"
					:include-points="points">

 其中参数分别代表，都是动态绑定data中的值，只需要修改data中对应的值，就能在页面上看到对应的变化：

scale 设置缩放比例

polyline 设置轨迹路线

latitude，longitude 设置地图中心点的经纬度

markers 是一个数组，里面包含想要在地图上显示的坐标点

include-points 用于显示所有的坐标点在地图上可见

 绑定数据示例：

		covers: [{
						id: 1,
						latitude: 30.89,
						longitude: 120.09,
						iconPath: '../../../static/icon/起点.svg',
					},
					// {
					// 	id: 2,
					// 	latitude: 39.90,
					// 	longitude: 116.39,
					// 	iconPath: '../../../static/icon/终点.svg',
					// },
				]，
scale: 10,

polyline: [],

latitude: 30.89,
longitude: 120.09,

points: [],

显示所有的坐标点在地图上可见的方法： 

	mounted() {
			// 在mounted钩子函数中计算所有覆盖物的经纬度坐标点，并设置include-points属性
			let points = this.covers.map(item => ({
				latitude: item.latitude,
				longitude: item.longitude
			}));
			this.points = points;
		},