快速上手

pnpm add @amap/amap-jsapi-loader

编写vue3组件

html

<template>
    <div id="container">
    </div>
</template>

js

<script setup lang="ts">
import AMaploader from '@amap/amap-jsapi-loader'
import { onMounted,ref } from 'vue'

let map = ref(null)

onMounted(() => {
    AMaploader.load({
        key: '', //在高德地图官网上注册后，申请的web开发者key，必填
        version: '2.0',//js API版本
        plugins: ['']
    })
        .then(AMap => { //js API加载完成后，获取AMap对象
        map = new AMap.Map('container', { //地图初始化
            viewMode: '3D', //默认2D
            zoom: 11, //地图级别
            center: [116.397428, 39.90923], //地图中心点经纬度
            mapStyle: 'amap://styles/xx', //xx可替换为normal、grey、whitesmoke、dark、light、graffiti
            layers:[layer], //创建的默认图层
        })
        
        //地图生命周期
        map.on('complete', function(){
            //地图图块加载完成后触发
        })
        map.off('click',clickHandler) //解绑地图点击事件
        map.destroy() //销毁地图，清空容器
        map = null 
        document.getElementById('container').remove()
        
        //创建图层
        const layer = new AMap.createDefaultLayer({
            zooms: [3,20], //可见级别
            visible: true, //是否可见
            opacity: 1, //透明度
            zIndex: 0, //叠加层级
        })
        
        //创建实时交通路况图层
        const traffic = new AMap.TileLayer.Traffic({ //可用.show/.hide方法显示隐藏
            autoRefresh: true, //是否自动刷新，默认false
            interval: 180, //刷新间隔,默认180s
        })
        map.add(traffic) //通过add方法添加图层
        
        //添加地图控件 如toolbar缩放工具条 scale比例尺 geolocation定位按钮等
        AMap.plugin('AMap.Toolbar', function(){
            var toolbar = new AMap.ToolBar() //实例化缩放工具条
            map.addControl(toolbar)
        })
        
        //搜索地点插件
        AMap.plugin(['AMap.PlaceSearch'], function () {
            const placeSearch = new AMap.PlaceSearch({
                pageSize: 5, //单页显示结果条数
                pageIndex: 1, //页码
                city: '010', //兴趣点城市
                citylimit: true, //是否强制限制在设置城市内搜索
                map: map, //展现结果的地图实例
                panel: 'my-panel', //结果列表将在此容器中展示
                autoFitView: true, //是否自动调整地图视野，使绘制的marker点都处于视口可见范围
             })
             placeSearch.search('北京大学') //使用插件搜索关键字并查看结果
             placeSearch.search('北京大学', function (status, result){//使用插件搜索关键字并自定义结果
                 //result对应POI信息
             }) 
        })
    })
        .catch(e => { //js API加载错误提示
        console.log(e)
    })
})

</script>

css

<style scoped>
#container {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 600px;
}
</style>

参考文章：《在 vue3 中使用高德地图》blog.csdn.net/weixin_6468…

有关vue3中使用高德地图的学习笔记

快速上手

编写vue3组件

html

js

css