vue3引入高德地图

左手吻左脸。

已于 2024-12-09 17:08:02 修改

阅读量467

点赞数 5

文章标签：高德地图api

于 2024-11-07 13:28:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47194802/article/details/143591736

版权

一、安装依赖

npm install @amap/amap-jsapi-loader

二、

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


    </div>
</template>

<script setup>

import AMapLoader from "@amap/amap-jsapi-loader";
const mmap = () => {
 window._AMapSecurityConfig = {
        securityJsCode: "key对应的code必填",
    };
    AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            const map = new AMap.Map("container", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 15, // 初始化地图级别
                // mapStyle: "amap://styles/0824ae733ca7d0699ff2d79d166a15b3", //设置地图的显示样式
                resizeEnable: true, //是否监控地图容器尺寸变化
                dragEnable: true, //初始状态下可移动
                center: [120.396005, 36.3210788], //初始化地图中心点青岛农大
            });
        })
        .catch((e) => {
            console.log(e);
        })


}
 mmap()
</script>
<style lang="scss" scoped>
.maincenter {
    width: 100%;
    position: relative;
}

#container {
    width: 100%;
    margin: 0 auto;
    height: 100vh;
}

i {
    font-style: normal;
}
</style>

如图：