高德地图，使用记录

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

---

前言

当前文章是基于高德地图官网提供的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) => {
        // 加载高德地图API
        AMapLoader.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 // 高德地图的Key
    MapId // 地图的容器 
    cityCode // 区市code编码
    AMapObj
    MapObj //地图实例
    pathArray //  Polygon 经纬度集合
    PolygonObj //  Polygon 实例
    MarkerClusterObj // 点聚合实例
    placeSearch // createAMapMap
    center // 获取地图中心点位经纬度
    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 // 获取传入的key
        this.MapId = MapId // 获取盒子的id
        this.AMapExample = AMapExample // 获取地图实例
        this.MapGive()  // 初始化地图实例
    }

    // 高德地图实例
    MapGive() {
        let that = this
        this.AMapExample = new Promise((resolve, reject) => {
            AMapLoader.load({
                key: this.key, // 'XXXXXXXXXXXXXXXXXa572b58dc8e8e0d48', //你申请的高德地图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", "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 = this
        
        that.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 = this
        console.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 = this
        console.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.5
            draggable: draggable, // 设置点标记是否可拖拽移动
            strokeStyle: strokeStyle, // 轮廓线样式，实线:solid，虚线:dashed
            extData: 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
        // 创建实例需要的盒子id
        let autoOptions = {
            input: InputId  // 你输入框的id
                    };
        // 调用搞得搜索 Api
        that.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 = this
        that.PolygonObj.destroy()
        that.MapObj.add(that.PolygonObj)
    }

    // 清除地图实例
    clearMap() {
        let that = this
        that.MapObj.destroy()
    }

    // 清除点聚合实例
    clearMarkerCluster() {
        let that = this
        that.MarkerClusterObj.setMap(null)
        that.MapObj.add(that.MarkerClusterObj)

    } 

总结

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