Vue3使用高德地图（3分钟快速上手）

一.、在高德开发平台注册账号

 高德开放平台 | 高德地图API (amap.com)

二、我的 > 管理管理中添加Key

三、安装依赖

npm i @amap/amap-jsapi-loader --save

四、创建一个放置地图的容器

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

<style scoped>
.container {
  width: 400px;
  height: 400px;
}
</style>

五、地图的使用

let map = null;
window._AMapSecurityConfig = {
    securityJsCode: ''//申请好的秘钥
}
onMounted(() => {
    AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
        .then((AMap) => {
            var geocoder = new AMap.Geocoder({
                // city: '010' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            })

            geocoder.getLocation(想定位的某个城市, function (status, result) {
                console.log(status, result);
                if (status === 'complete' && result.info === 'OK') {
                    var lnglat = result.geocodes[0].location
                    console.log(lnglat);
                    // result中对应详细地理坐标信息
                    map = new AMap.Map("container", {
                        // 设置地图容器id
                        viewMode: "3D", // 是否为3D地图模式
                        zoom: 11, // 初始化地图级别
                        center: [lnglat.lng, lnglat.lat], // 初始化地图中心点位置
                    });
                }
            })
        })
        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});

六、总结

        高德地图广泛应用于日常出行、旅游规划、商业定位等领域，可以为用户提供丰富而全面的地图服务和位置信息。希望此篇文章对您能有所帮助！