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.15plugins: ["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", {// 设置地图容器idviewMode: "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;},