vue-cli中使用高德地图及其插件

最新推荐文章于 2024-07-04 17:51:12 发布

Maypleasecherish

最新推荐文章于 2024-07-04 17:51:12 发布

阅读量1.5k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/Mayisheart/article/details/122381216

版权

本文档详细介绍了如何在Vue-cli项目中集成高德地图，包括申请API key、安装插件、在组件中引入、定义方法、在mounted阶段调用方法以及创建地图容器。此外，还展示了如何添加点标记和信息窗体，为开发者提供了一个全面的参考指南。

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

一、先去高德地图Api申请账号，创建账号—>创建应用—>添加key（很重要，没有key下面步骤无意义）高德地图网址：高德地图API

二、在vue-cli中下载高德地图插件

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

cnpm i @amap/amap-jsapi-loader --save//淘宝镜像下载

三、在即将使用地图的组件内引入

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

四、在methods中定义方法

initMap() {
                AMapLoader.load({
                    "key": "你的key码", // 申请好的Web端开发者Key，首次调用 load 时必填
                    "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                        "version": '1.1',   // AMapUI 缺省 1.1