Vue3简简单单实现高德地图useMapHooks，可扩展。

简介

高德地图提供了丰富的API和功能，包括地图展示、地点搜索等。在Vue3中，我们可以通过自定义hooks来封装这些功能，使得地图操作更加简洁和模块化。useMapHooks是我们实现这一目标的关键。

使用useMapHooks

在组件中使用useMaphooks来初始化地图和执行地点搜索。

vue复制

<template>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import useMap from './useMap';

const { initMap, onMapReady, placeSearch } = useMap();

onMounted(() => {
  initMap();
  onMapReady(async () => {
    // 地图准备就绪后的操作
  });
});
</script>

配置文件

我们需要配置高德地图的API密钥和相关参数。这些配置将用于初始化地图和加载必要的插件。

TypeScript复制

// config.ts
export const mapConfig = {
    securityJsCode: 'securityJsCode',
    key: 'key',
    version: "2.0",
    plugins: ["AMap.Scale", "AMap.HawkEye", "AMap.PolylineEditor", "AMap.ControlBar"],
}

实现useMapHooks

接下来，我们将创建一个名为useMap的自定义hooks，它将封装地图的初始化、事件监听和地点搜索等功能。

TypeScript复制

// useMap.ts
import { ref } from "vue";
import { mapConfig } from "./config";
import AMapLoader from "@amap/amap-jsapi-loader";

const useMap = () => {
    const map = ref<any>(null);
    const AMapIns = ref<any>(null);
    const intervalId = ref<number | undefined>();

    // 检查地图是否准备就绪
    const onMapReady = (cb: () => void) => {
        const checkMapReady = () => {
            if (AMapIns.value) {
                clearInterval(intervalId.value);
                cb && cb();
            } else {
                intervalId.value = setTimeout(checkMapReady, 100);
            }
        };
        intervalId.value = setTimeout(checkMapReady, 100);
    };

    // 初始化地图
    const initMap = (id = "mapContainer") => {
        return new Promise<any>((resolve) => {
            (window as any)._AMapSecurityConfig = {
                securityJsCode: mapConfig.securityJsCode,
            };
            AMapLoader.load({ ...mapConfig }).then((AMap) => {
                AMapIns.value = AMap;
                map.value = new AMap.Map(id, {
                    animateEnable: false,
                    rotateEnable: false,
                    zoom: 10.5,
                    keyboardEnable: false,
                    touchZoom: false,
                });
                resolve(AMap);
            });
        });
    };

    // 地点搜索
    const placeSearch = <T>(city: string, keyword: string) => {
        return new Promise<T[]>((resolve) => {
            AMapIns.value.plugin("AMap.PlaceSearch", function () {
                const placeSearch = new AMapIns.value.PlaceSearch({
                    city,
                });
                placeSearch.search(keyword, function (_status: any, result: any) {
                    if (result.info === "OK") {
                        resolve(result.poiList.pois);
                    } else {
                        resolve([]);
                    }
                });
            });
        });
    };

    // 设置地图缩放和平移中心
    const setZoomAndCenter = (zoom: number, position: number[]) => {
        map.value.setZoomAndCenter(zoom, position);
    };

    return { initMap, onMapReady, placeSearch, setZoomAndCenter };
};

export default useMap;

tip

1.需要自己登陆高德开发平台 注册 api key

结论

通过上述步骤，我们成功地在Vue3中实现了一个简单的高德地图useMapHooks。这不仅使得地图操作更加简洁，而且提高了代码的可维护性和可重用性。无论是展示地图、搜索地点还是其他地图相关功能，useMapHooks都能帮助你轻松实现。