关于如何在vue中使用高德地图，以及添加信息窗体

最新推荐文章于 2024-10-09 11:35:38 发布

Insideo

最新推荐文章于 2024-10-09 11:35:38 发布

阅读量2.5k

点赞数 2

分类专栏：关于vue-cli中使用高德地图插件文章标签： vue.js 前端 webstorm

本文链接：https://blog.csdn.net/Insideo/article/details/122381570

版权

本文介绍了如何在Vue项目中使用高德地图API，包括注册开发者账号获取key，通过命令行安装地图插件，以及在组件内初始化地图。特别提到在mounted生命周期钩子中初始化地图，并展示了添加信息窗体的代码示例。注意在封装成函数时，由于this指向问题，需要保存this到that变量以正确操作Vue组件。

摘要由CSDN通过智能技术生成

首先需要自己去注册高德地图开发者平台的账号获取key码，

然后在vue项目中输入命令下载高德地图插件

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

然后在你想要使用的组件中导入

 import AMapLoader from "@amap/amap-jsapi-loader";

创建一个盛放地图的盒子

 <div class="map-box" id="container">

 </div>

然后在methods里使用，并且需要在mounted中初始化地图插件

     methods:{
            initMap() {
                var that=this
                AMapLoader.load({
                    "key": "", // 申请好的Web端开发者Key，首次调用 load 时必填
                    "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                        "version": '1.1',   // AMapUI 缺省 1.1
                        "plugins":[],       // 需要加载的 AMapUI ui插件
                    }
                }).then(AMap => {
                        this.map = new AMap.Map("container", {
                            //设置地图显示的缩放级别
                            zoom: 15,
                            // 是否允许鼠标拖拽
                            dragEnable: true,
                            // 鼠标滚轮放大缩小
                            scrollWheel: true,