提示：以下是本篇文章正文内容，下面案例可供参考

前言

当前文章是基于高德地图官网提供的API提供的API，在项目中用到的方法进行二次简单处理，用到 npm install @amap/amap-jsapi-loader 使用第三方插件
使用方法有
1.地图的创建（AMap.Map）
2.矢量图形（Polygon）
3.编辑矢量图层（PolygonEditor）
4.创建点聚合实例（MarkerCluster ）
5.搜索实例（PlaceSearch）
6.创建点标记（Marker）
7.清除矢量图形，清除地图实例（destroy（）），清除点聚合实例（ setMap(null)）

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用Promise分装方法主体或者使用class进行封装

1.引入库 高德官网 AMapUI 组件库

// index.js 文件
import AMapLoader from '@amap/amap-jsapi-loader';
export function AutoNavi() {return new Promise((resolve, reject) => {// 加载高德地图APIAMapLoader.load({key: 'XXXXXXXXXXXXXXXXXXXXXXXXXX2b58dc8e8e0d48', //再高德官网申请的高德地图key version: '2.0', // 版本好plugins: ['AMap.InfoWindow', 'AMap.Marker', 'AMap.DrivingResult', 'AMap.MarkerClusterer', 'AMap.MarkerCluster', 'AMap.Driving', 'AMap.GraspRoad', 'AMap.DistrictSearch',  'AMap.PolygonEditor',   'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.MassMarks' ,  'AMap.PolygonEditor', 'AMap.MouseTool'  , 'AMap.GeometryUtil'  , 'AMap.Polygon'  ,  'AMap.LngLat'    ],AMapUI: { // 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 版本plugins: ["geo/DistrictExplorer"], // 需要加载的 AMapUI ui插件},}).then((AMap) => {// 实例化地图return resolve(AMap)})})
}

// mapClass.js 文件class AMapMAp {AMapExample // 地图实例key // 高德地图的KeyMapId // 地图的容器 cityCode // 区市code编码AMapObjMapObj //地图实例pathArray //  Polygon 经纬度集合PolygonObj //  Polygon 实例MarkerClusterObj // 点聚合实例placeSearch // createAMapMapcenter // 获取地图中心点位经纬度PolygonDisplacement // 矢量图形 获取移动后的经纬度集MarkerObj //创建点标记实例AMapUIFun_w // 地图请求实例/*** constructor* 地图类的初始值* @param {*} key 自己创建的高德Api的Key : {@link https://console.amap.com/dev/key/app}  * @param {*} MapId  地图容器的ID*/constructor({AMapExample,key,MapId}) {this.key = key // 获取传入的keythis.MapId = MapId // 获取盒子的idthis.AMapExample = AMapExample // 获取地图实例this.MapGive()  // 初始化地图实例}// 高德地图实例MapGive() {let that = thisthis.AMapExample = new Promise((resolve, reject) => {AMapLoader.load({key: this.key, // 'XXXXXXXXXXXXXXXXXa572b58dc8e8e0d48', //你申请的高德地图keyversion: '2.0',plugins: ['AMap.InfoWindow', 'AMap.Marker', 'AMap.DrivingResult', 'AMap.MarkerClusterer', 'AMap.MarkerCluster', 'AMap.Driving', 'AMap.GraspRoad', 'AMap.DistrictSearch', 'AMap.PolygonEditor', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.MassMarks', 'AMap.PolygonEditor', 'AMap.MouseTool', 'AMap.GeometryUtil', 'AMap.Polygon', 'AMap.LngLat'],AMapUI: {// 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 版本plugins: ["geo/DistrictExplorer", "misc/PathSimplifier", "overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件},}).then((AMap) => {that.CreateAMapUI(AMapUI)return resolve(AMap)})})}}

二、 获取地图中心点

代码如下（示例）：

   /*** *createAMapMap* @param { Object} createAMapMapObj* @param {Number}createAMapMapObj.cityCode 区域编码* @param {String} createAMapMapObj.InputId 地图检索输入框ID* @param {*} createAMapMapObj.mapStyle     地图样式* @param {*} createAMapMapObj.viewMode     开启3D视图,默认为关闭* @param {*} createAMapMapObj.features     地图显示元素种类* @param {*} createAMapMapObj.resizeEnable 是否监控地图容器尺寸变化*/createAMapMap({cityCode,InputId,mapStyle,viewMode,features,zooms,resizeEnable}) {let that = thisthat.cityCode = cityCode  // 区市code编码that.AMapExample.then(AMap => {// 创建地图实例that.AMapObj = AMap//  通过检索 行政编码获取中心点坐标AMap.plugin("AMap.DistrictSearch", function () {new AMap.DistrictSearch({extensions: "all",subdistrict: 0,}).search(cityCode + '', function (status, result) {// 获取行政区经纬度 let LngAndLat = [result.districtList[0].center.lng + '', result.districtList[0].center.lat + '']// 将结构 行政区 的经纬度 赋值给 地图中心点 that.center = {lng: result.districtList[0].center.lng,lat: result.districtList[0].center.lat}that.pathArray = result.districtList[0].boundaries// 调用地图创建方法that.createMap({zooms,center: LngAndLat,InputId,mapStyle,viewMode,features,resizeEnable})})})})}

三、地图创建方法

代码如下（示例）：

 /*** * createMap* 地图试图创建* @param {Object} createMapObj 地图试图创建参数对象* @param {Array} createMapObj.center  初始化地图中心点* @param {Array} createMapObj.zooms  限制地图的最大和最小的缩放级别* @param {String} createMapObj.InputId  地图检索输入框ID* @param {String} createMapObj.mapStyle  地图的显示样式* @param {String} createMapObj.viewMode  开启3D视图,默认为关闭* @param {Array} createMapObj.features  地图显示元素种类* @param {Boolean} createMapObj.resizeEnable  是否监控地图容器尺寸变化*/createMap({center,zooms,zoom = 11,InputId,mapStyle = "amap://styles/blue",viewMode = "3D",features = ['bg', 'road', 'building', 'point'],resizeEnable = true}) {let that = thisconsole.log(zooms, 'zooms');that.MapObj = new AMap.Map(that.MapId, {zoom: zoom, // 初始化地图层级zooms: zooms,resizeEnable: resizeEnable, //是否监控地图容器尺寸变化mapStyle: mapStyle, // 地图的显示样式viewMode: viewMode, // 开启3D视图,默认为关闭features: features, // 地图显示元素种类center // 初始化地图中心点});that.CreatePlaceSearch(InputId)}

四、创建矢量图形方法 (Polygon)

CreatePolygon({path,strokeStyle = 'solid',draggable = false,strokeColor = "blue",strokeWeight = 3,fillColor = "#47E9FF",fillOpacity = 0,extData = {}}) {let that = thisconsole.log(that.AMapObj, 'pathCreatePolygon');that.PolygonObj = new that.AMapObj.Polygon({path: path, // 当前区域的经纬度strokeColor: strokeColor, //城市边界颜色strokeWeight: strokeWeight, // 轮廓线宽度fillColor: fillColor, // 多边形填充颜色，使用16进制颜色代码赋值。fillOpacity: fillOpacity, // 多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5draggable: draggable, // 设置点标记是否可拖拽移动strokeStyle: strokeStyle, // 轮廓线样式，实线:solid，虚线:dashedextData: extData // 用户自定义属性，支持JavaScript API任意数据类型});that.MapObj.add(that.PolygonObj)// 当 draggable 这个变量为真的时候在执行一下逻辑// 用于获取矢量图形的移动后的经纬度if (draggable) {// 矢量图形的移动事件that.PolygonObj.on('dragging', (e) => {let {path} = e.target._opts // 获取矢量图形的经纬度that.PolygonDisplacement = path;})}return that.PolygonObj}

五 、编辑矢量图层

CreatePolygonEditor({MapObj,Polygon}) {let that = this;that.CreatePolygonEditorObj = new that.AMapObj.PolygonEditor(that.MapObj, Polygon)// 在外层利用实例调用该方法// 使用.open() 打开矢量图层// 使用 .close()关闭矢量图层return that.CreatePolygonEditorObj}

六、创建点聚合实例

 CreateMarkerCluster({processingFun,_renderMarker,MarkerClusterStyle}) {let that = this;this.MarkerClusterObj = new that.AMapObj.MarkerCluster(that.MapObj, processingFun, {styles: MarkerClusterStyle,gridSize: 48,renderMarker: _renderMarker,})return this.MarkerClusterObj}// 调用示例var _renderMarker = function (context) {let div = document.createElement('div');div.style = ` height: 38px; width: 38px;border-radius: 12px;`div.className = 'ZhiLianClass'context.marker.setContent(div)context.marker.setExtData(context.data);// 实例点击事件context.marker.on("click", () => {})}this.CreateMarkerCluster({ 这个位置是你的数据源,_renderMarker})

七、创建搜索实例

   CreatePlaceSearch(InputId) {let that = this// 创建实例需要的盒子idlet autoOptions = {input: InputId  // 你输入框的id};// 调用搞得搜索 Apithat.placeSearch = new that.AMapObj.PlaceSearch({map: that.MapObj});// 注册监听，当选中某条记录时会触发let auto = new that.AMapObj.AutoComplete(autoOptions);auto.on("select", select); //注册监听，当选中某条记录时会触发let circle = null// 高德自带搜索function select(e) {if (circle) {that.MapObj.remove(circle)}if (!e.poi.location && !e.poi.location) {ElMessage({message: '当前所选择的地区没用经纬度！！！',})}that.placeSearch.setCity(e.poi.adcode); // 获取选择的名称的编码that.placeSearch.search(e.poi.name); //关键字查询查询}}

八、创建点标记

  createMarker() {let that = this;that.MarkerObj = new that.AMapObj.Marker({position: JSON.parse(DianShili.longitudeAdnLatitude),icon: new that.AMapObj.Icon({image: "/img/muBiaoDian/energyCard.png",size: new that.AMapObj.Size(40, 40),imageSize: new that.AMapObj.Size(40, 40), //图标大小}),anchor: "bottom-center",offset: new that.AMapObj.Pixel(-18, 40),draggable: true,cursor: "move",});//  为生成的实例添加 名称that.MarkerObj.setLabel({direction: "top",offset: new AMapObj.value.Pixel(-25, -20), //设置文本标注偏移量content: `<div class='info${DotIndex.value}'>${DianShili.name}</div>`, //设置文本标注内容});//  Marker 点拖拽完成后的毁掉that.MarkerObj.on("dragend", function (e) {GaoDeMuBiaoBianJi.value[DotIndex.value].longitudeAdnLatitude =JSON.stringify([e.lnglat.lng, e.lnglat.lat]);dotDialogType.value = true; // 重新打开编辑窗口that.MarkerObj.setDraggable(false); // 关闭当前点的拖拽方法that.MarkerObj.setCursor("pointer"); //});return that.MarkerObj}

九、清除的实例方法

// 清除矢量图形clearPolygon() {let that = thisthat.PolygonObj.destroy()that.MapObj.add(that.PolygonObj)}// 清除地图实例clearMap() {let that = thisthat.MapObj.destroy()}// 清除点聚合实例clearMarkerCluster() {let that = thisthat.MarkerClusterObj.setMap(null)that.MapObj.add(that.MarkerClusterObj)} 

总结

当前文章是博主在开发中常用的一些方法，单独抽出来 的一些方法便于开发阅读，希望能够帮助到您，感谢您的阅读，谢谢。