LocalLivingServicesUniapp/pages/component/map.vue

<template>
    <view class="content">
        <map id="amap" style="width: 100%; height: 300px;"></map>
    </view>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
    data() {
        return {
            map: null,
        };
    },
    onReady() {
        this.initMap();
    },
    methods: {
        initMap() {
            AMapLoader.load({
                key: '你的高德地图Key', // 在高德地图开放平台申请的Key
                version: '2.0', // 指定要加载的API的版本号，默认为 1.4.15
            }).then((AMap) => {
                this.map = new AMap.Map('amap', {
                    resizeEnable: true,
                    zoom: 11, // 初始化地图层级
                    center: [116.397428, 39.90923], // 初始化地图中心点位置
                });
            }).catch(e => {
                console.error(e);
            });
        }
    }
}
</script>

<style scoped>
.content {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>